如何在地图上增加Marker #392

Activity

1. yc-2018 commented on Sep 4, 2025

   

   yc-2018

   on Sep 4, 2025

   More actions

   参考

   <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>