React JS中借助mapmyindia-react包实现MapMyIndia多标记点展示求助

markers属性本身的入参格式就是对象数组，不需要额外的渲染逻辑，只要把多个符合要求的标记配置项追加到数组中，组件就会自动完成批量标记的渲染。

• 固定点位的多标记写法
  直接在原有单标记的数组结构基础上，依次追加同格式的标记对象即可，示例代码：

<div className="w-100 overflow-hidden">
  <Maps
    markers={[
      {
        position: [21.145664, 72.759782],
        draggable: true,
        title: "Marker title",
        onClick: (e) => {
          console.log("clicked ");
        },
        onDragend: (e) => {
          console.log("dragged");
        },
      },
      // 追加第二个标记
      {
        position: [19.0760, 72.8777],
        draggable: false,
        title: "Mumbai Point",
        onClick: (e) => {
          console.log("第二个标记被点击");
        },
      },
      // 追加第三个标记
      {
        position: [28.6139, 77.2090],
        title: "Delhi Point",
        onClick: (e) => {
          console.log("第三个标记被点击");
        },
      },
    ]}
  />
</div>

• 动态批量点位的写法
  如果点位数据来自接口请求、本地状态存储等可变数据源，不需要手动逐个编写标记配置项，直接将源数据映射为markers要求的格式传入即可：

import { useState } from 'react'
import { Maps } from 'mapmyindia-react'

function MapView() {
  // 存储从接口/本地获取的批量点位数据
  const [rawPoints, setRawPoints] = useState([
    { lat: 21.145664, lng: 72.759782, pointName: "Surat", isDraggable: true },
    { lat: 19.0760, lng: 72.8777, pointName: "Mumbai", isDraggable: false },
    { lat: 28.6139, lng: 77.2090, pointName: "Delhi", isDraggable: false },
  ])

  return (
    <div className="w-100 overflow-hidden">
      <Maps
        markers={rawPoints.map(item => ({
          position: [item.lat, item.lng],
          draggable: item.isDraggable,
          title: item.pointName,
          onClick: (e) => {
            console.log(`${item.pointName} 点位触发点击`)
          },
        }))}
      />
    </div>
  )
}

注意配置每个标记的position时，数组顺序必须严格遵循【纬度, 经度】的规则，顺序颠倒会导致点位定位偏移。每个标记的onClick、onDragend等事件回调可以独立配置，不需要所有标记共用同一套逻辑。

内容的提问来源于stack exchange，提问作者Meet Patel