react-amap
react-amap copied to clipboard
如何在地图上增加Marker
假设我现在有一个place list,每个item都有latitude和longitude,如何将他们全部通过marker在地图上标注出来?谢谢
参考
<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>