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 style='border-bottom: 1px solid #F0F0F0; margin-bottom: 4px; padding: 4px 0 4px 0; color: #000000; font-size: 16px; '>${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();     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 style='border-bottom: 1px solid #F0F0F0; margin-bottom: 4px; padding: 4px 0 4px 0; color: #000000; font-size: 16px; '>${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();     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