react-amap icon indicating copy to clipboard operation
react-amap copied to clipboard

如何在地图上增加Marker

Open andrew20012656 opened this issue 6 months ago • 1 comments

假设我现在有一个place list,每个item都有latitude和longitude,如何将他们全部通过marker在地图上标注出来?谢谢

andrew20012656 avatar Jun 04 '25 18:06 andrew20012656

参考

<Map
        ref={(instance) => {
          if (instance && instance.map && !map) setMap(instance.map);
        }}
        center={main.warehousePoint}
        mapStyle={getMapStyleByLocal()}
      >

        {/* ————仓库———— */}
        <Marker position={new AMap.LngLat(...main.warehousePoint)} anchor="center">
          <div className={styles.myMarker}>仓</div>
        </Marker>

        {/* ————点位———— */}
        {Object.values(lineMapData).map(({ color, orders, show }, index) =>
          <Fragment key={index}>
            {orders.map((point, i) =>
              <Marker
                key={point.uuid}
                anchor="center"
                visible={show}
                onMouseOver={() => showText(point)}
                onMouseOut={() => hideText()}
                position={new AMap.LngLat(point.longitude, point.latitude)}
              >
                <div style={{ background: color }} className={styles.myMarker}>
                  {i + 1}
                </div>
              </Marker>)}
          </Fragment>,
        )}

        {/* ————折线———— */}
        {Object.values(lineMapData).map(({ color, orders, show, line }) => line &&
          <Polyline
            key={orders[0].uuid}
            showDir
            strokeWeight={6}
            strokeOpacity={0.7}
            strokeColor={color}
            path={[main.warehousePoint, ...line]}
            visible={show}
          />,
        )}

        {/* ————未分配线路订单———— */}
        {smartDispatch.dispatchXxxResultList.map((itemXxx) =>
          <Fragment key={itemXxx.uuid}>
            {itemXxx.orders.map((point, i) =>
              <Marker
                key={point.uuid}
                anchor="center"
                visible={showUnLinePoint}
                onMouseOver={() => showText(point)}
                onMouseOut={() => hideText()}
                position={new AMap.LngLat(point.longitude, point.latitude)}
              >
                <div className={styles.myMarkerUn}>
                  X.{i + 1}
                </div>
              </Marker>)}
          </Fragment>,
        )}

        {/* ————点上文本———— */}
        <Text ref={textRef} anchor="bottom-center" zIndex={999} />
      </Map>

yc-2018 avatar Sep 04 '25 02:09 yc-2018