reactjs - 如何使用 React 在 mapmyindia 上绘制折线？

Question

我只是在探索 Mapmyindia。我已经浏览了地图上的基本位置显示。我不知道如何在地图上显示折线。

位置 app.js 的代码

import "./App.css";
import SideBar from "./componants/SideBar";
import Map from "mapmyindia-react";
// import MapmyIndia, { MapMarker } from "react-mapmyindia";

function App() {
  return (
    <div className="App">
      Hello
      <Map
        markers={[
          {
            position: [21.1588329, 72.7688111],
            draggable: true,
            zoom: 15,
            title: "Marker title",
            onClick: (e) => {
              console.log("clicked ");
            },
            onDragend: (e) => {
              console.log("dragged");
            },
            onMouseover: (e) => {
              console.log("Mouse over");
            },
          },
        ]}
      />
      {/* <Map /> */}
      <SideBar></SideBar>
    </div>
  );
}

export default App;

结果是这个

现在，请帮助绘制折线。

Answer 1

我猜你正在为地图使用 npm 包。如果您在 gitHub 中查看库的代码，您可以看到所有者仅添加了标记功能。您可以简单地从那里复制代码并将其手动添加到您的项目中，然后添加折线功能，然后将数据作为道具从您的 app.js 文件传递​​，就像您为标记所做的那样。

    renderPolylines = () => {
    const { polylines = [] } = this.props;
    if (!this.map) {
      return;
    }
    polylines.map(m => {
      if (m?.position && Array.isArray(m.position)) {
        const { position, color, weight, opacity } = m;
        let points = [];
        position.map(p => {
          const { lat, lng } = p;
          const center = new L.LatLng(lat, lng);
          points.push(
            new L.LatLng(center.lat, center.lng))/*array of wgs points*/
        })
        const polyline = new L.Polyline(points, { color, weight, opacity });
        this.map.addLayer(polyline);
        this.polylines.push(polyline);
      }
    });
  };

从 app.js 渲染折线的道具

    polylines = {[
    {
      position: [
        {
          lat: 18.5014,
          lng: 73.805,
        },
        {
          lat: 18.5414,
          lng: 73.855,
        },
        {
          lat: 18.5514,
          lng: 73.855,
        },
        {
          lat: 18.5614,
          lng: 73.855,
        },
      ],
      color: "red",
      weight: 4,
      opacity: 0.5,
    },
  ]}