高德地图如何添加地点标注（js高德地图添加点Marker，添加线段Polyline，添加一个区域Polygon（面））

高德地图JS API 实例 亲测可用

参考网站=> 阿里云数据可视化平台（下载json用的）：http://datav.aliyun.com/portal/school/atlas/area_selector?spm=a2crr.23498931.0.0.685915dd8QQdlv

1.渲染地图

const [initDataMap, setInitDataMap] = useState({ centerCity: 拱墅区, defaultZoom: 12, centerPoint: { lng: 120.165533, lat: 30.329062 }, }); //初始化地图 const initMap = () => { const { centerPoint } = initDataMap; const center = [centerPoint.lng, centerPoint.lat]; const mzooms = [8, 19]; const mzoom = 12; let map = new AMap.Map("AMapBox", { zoom: mzoom, //初始化地图层级 zooms: mzooms, rotateEnable: false, // 固定视角 disableSocket: true, center: center, }); mapRef.current = map; addAreaCoordinate(map); // 这个是渲染块 };

2.绘制Marker标记点

// 绘制点 const drawMarker = (data: any, map: any) => { const infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(5, -30), autoMove: true, closeWhenClickMap: true, }); let ap: any = [] data.forEach((item: any) => { if (item.lat && item.lng) { const ad = [item.lng, item.lat]; const marker = new AMap.Marker({ position: ad, icon: iconIMg, // 自己的icon map: map }); ap.push(marker); setMarkerList(ap); const content = item.projectName; marker.on(click, () => { infoWindow.setContent(content); infoWindow.open(map, ad); }); } }); map.setFitView(); }

3.绘制线段Polyline

// 绘制线段 const polylineInit = (lineArr: any, map: any, callBack: any) => { const infoWindowLine = new AMap.InfoWindow({ offset: new AMap.Pixel(5, -30), autoMove: true, closeWhenClickMap: true, }); const polyline = new AMap.Polyline({ path: lineArr.list, //设置线覆盖物路径 strokeColor: "#3366FF", //线颜色 strokeOpacity: 1, //线透明度 strokeWeight: 5, //线宽 strokeStyle: "solid", //线样式 strokeDasharray: [10, 5] //补充线样式 }); polyline.setMap(map); callBack(polyline); const content = ` <div> <div>${lineArr.roadName}</div> <div >所属国企：${lineArr.belongCorpName}</div> <div>当前进度：${lineArr.currentStatusStr}</div> <a onclick="handleClickDetail(${lineArr.id})">查看详情信息</a> <div> ` if (callBackDetail) { polyline.on(click, (e: any) => { infoWindowLine.setContent(content); infoWindowLine.open(map, e.lnglat); }); } } // 处理绘制线段 可不看嘎嘎··· const dealPolylineInit = (arr: any, map: any) => { // map.clearMap(); * arr的数据结构 * @arr的数据结构 * arr:[ * { ..., locationMark:[{lng:,lat:},{},{}] }, * { ..., }, * { ..., }, * ] * map.remove(polylineList); let ad: any = []; arr.forEach((item: any) => { const st = JSON.parse(item.locationMark); st.forEach((element: any) => { element.forEach((ele: any) => { ele.roadName = item.roadName; ele.belongCorpName = item.belongCorpName; ele.currentStatusStr = item.currentStatusStr; ele.id = item.roadId; }); }); ad.push(st); }); const flatArr = ad.flat(); const cloneDeepData = cloneDeep(flatArr); const opd: any = []; cloneDeepData.forEach((item: any) => { let lineArr: any = []; const obj: any = {}; item.forEach((element: any) => { const ad = [element.lng, element.lat]; obj.roadName = element.roadName; obj.belongCorpName = element.belongCorpName; obj.currentStatusStr = element.currentStatusStr; obj.id = element.id lineArr.push(ad); }); obj.list = lineArr; polylineInit(obj, map, (v: any) => { opd.push(v) }); }) setPolylineList(opd) }

4.绘制区域Polygon

const addAreaCoordinate = (map: any) => { const obj = gs_json || ; const points: any[] = []; obj?.features[0]?.geometry?.coordinates[0][0].map((item: any) => { points.push(new AMap.LngLat(item[0], item[1])); }); const polygon = new AMap.Polygon({ path: points, color: #1CB9FF, weight: 3, opacity: 0.5, fillColor: #1CB9FF, fillOpacity: 0.05, }); map.add(polygon); map.setFitView(polygon);//视口自适应 }

5.完整的代码------（react写的
    
    
    
 ，但不影响cv）

import React, { useRef, forwardRef, useImperativeHandle, useEffect, useState } from react; //antd // 第三方组件 //@ts-ignore import AMap from AMap; import { cloneDeep } from lodash; import gs_json from @/assets/json/gongshu.json; // 地图区域的json数据 import iconIMg from @/assets/productizationimg/local.png const AMapModal = forwardRef((props: any, ref: any) => { const { roadMapData, projectMapData, isShowLanLat, callBackDetail } = props; const mapRef = useRef<any>(); const [markerList, setMarkerList] = useState<any>([]); const [polylineList, setPolylineList] = useState<any>([]); const [initDataMap, setInitDataMap] = useState({ centerCity: 拱墅区, defaultZoom: 12, centerPoint: { lng: 120.165533, lat: 30.329062 }, }); //@ts-ignore window.document.handleClickDetail = function (id: any) { if (callBackDetail) { callBackDetail(id); } }; // 根据levelCode向地图中画一个区域轮廓 const addAreaCoordinate = (map: any) => { const obj = gs_json || ; const points: any[] = []; obj?.features[0]?.geometry?.coordinates[0][0].map((item: any) => { points.push(new AMap.LngLat(item[0], item[1])); }); const polygon = new AMap.Polygon({ path: points, color: #1CB9FF, weight: 3, opacity: 0.5, fillColor: #1CB9FF, fillOpacity: 0.05, }); map.add(polygon); map.setFitView(polygon);//视口自适应 } // 绘制点 const drawMarker = (data: any, map: any) => { const infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(5, -30), autoMove: true, closeWhenClickMap: true, }); let ap: any = [] data.forEach((item: any) => { if (item.lat && item.lng) { const ad = [item.lng, item.lat]; const marker = new AMap.Marker({ position: ad, icon: iconIMg, map: map }); ap.push(marker); setMarkerList(ap); const content = item.projectName; marker.on(click, () => { infoWindow.setContent(content); infoWindow.open(map, ad); }); } }); map.setFitView(); } // 绘制线段 const polylineInit = (lineArr: any, map: any, callBack: any) => { const infoWindowLine = new AMap.InfoWindow({ offset: new AMap.Pixel(5, -30), autoMove: true, closeWhenClickMap: true, }); const polyline = new AMap.Polyline({ path: lineArr.list, //设置线覆盖物路径 strokeColor: "#3366FF", //线颜色 strokeOpacity: 1, //线透明度 strokeWeight: 5, //线宽 strokeStyle: "solid", //线样式 strokeDasharray: [10, 5] //补充线样式 }); polyline.setMap(map); callBack(polyline); const content = ` <div> <div>${lineArr.roadName}</div> <div >所属国企：${lineArr.belongCorpName}</div> <div>当前进度：${lineArr.currentStatusStr}</div> <a onclick="handleClickDetail(${lineArr.id})">查看详情信息</a> <div> ` if (callBackDetail) { polyline.on(click, (e: any) => { infoWindowLine.setContent(content); infoWindowLine.open(map, e.lnglat); }); } } // 处理绘制线段 const dealPolylineInit = (arr: any, map: any) => { // map.clearMap(); * arr的数据结构 * @arr的数据结构 * arr:[ * { ..., locationMark:[{lng:,lat:},{},{}] }, * { ..., }, * { ..., }, * ] * map.remove(polylineList); // 清除线段的 let ad: any = []; arr.forEach((item: any) => { const st = JSON.parse(item.locationMark); st.forEach((element: any) => { element.forEach((ele: any) => { ele.roadName = item.roadName; ele.belongCorpName = item.belongCorpName; ele.currentStatusStr = item.currentStatusStr; ele.id = item.roadId; }); }); ad.push(st); }); const flatArr = ad.flat(); const cloneDeepData = cloneDeep(flatArr); const opd: any = []; cloneDeepData.forEach((item: any) => { let lineArr: any = []; const obj: any = {}; item.forEach((element: any) => { const ad = [element.lng, element.lat]; obj.roadName = element.roadName; obj.belongCorpName = element.belongCorpName; obj.currentStatusStr = element.currentStatusStr; obj.id = element.id lineArr.push(ad); }); obj.list = lineArr; polylineInit(obj, map, (v: any) => { opd.push(v) }); }) setPolylineList(opd) } const initMap = () => { const { centerPoint } = initDataMap; const center = [centerPoint.lng, centerPoint.lat]; const mzooms = [8, 19]; const mzoom = 12; let map = new AMap.Map("AMapBox", { zoom: mzoom, //初始化地图层级 zooms: mzooms, rotateEnable: false, // 固定视角 disableSocket: true, center: center, }); mapRef.current = map; addAreaCoordinate(map); }; useEffect(() => { initMap(); }, []); // 地图道路线更新 useEffect(() => { dealPolylineInit(roadMapData, mapRef.current); }, [roadMapData]); // 地图点更新 useEffect(() => { if (isShowLanLat == 1) { drawMarker(projectMapData, mapRef.current); } else { if (mapRef.current) { mapRef.current.remove(markerList);// 清除markerList点位 } } }, [isShowLanLat, projectMapData]); return ( <div> <div id=AMapBox style={{ width: 100%, height: 640 }}></div> </div> ); }) export default AMapModal