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

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

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

<script src="//webapi.amap.com/maps?v=1.4.15&key=564abe9d4eef2535f9cc6ab1c1229cfc&plugin=Map3D,AMap.DistrictSearch,AMap.MarkerClusterer,AMap.Object3DLayer,AMap.MouseTool"></script>

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