:::info 高德默认是02坐标系 后端存数据是84坐标系 84转02会有微小的偏差，所以不要多次互相转换坐标 :::

初始化地图

  • https://lbs.amap.com/api/javascript-api/reference/map
    1. this.map = new AMap.Map('container', {
    2.   zoom:11,//级别
    3.   center: [116.397428, 39.90923],//中心点坐标
    4.   viewMode:'2D',//使用2D\3D视图
    5.   mapStyle:'amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86',//自定义地图样式
    6. });

    获取屏幕可视范围四个角的经纬度

    1. this.map.getBounds()

    监听鼠标缩放级别

    1. // 缩放级别begin=============
    2. AMap.event.addListener(this.map, 'zoomend', () => {
    3. /*地图级别缩放或平移后 修改当前地图缩放级别，和当前屏幕范围的坐标*/
    4. this.arrayBounds = this.map.getBounds()
    5. this.currenZoom = this.map.getZoom()
    6. });

    监听地图平移

    1. AMap.event.addListener(this.map, 'moveend', () => {
    2. /*地图级别缩放或平移后 修改当前地图缩放级别，和当前屏幕范围的坐标*/
    3. this.arrayBounds = this.map.getBounds()
    4. this.currenZoom = this.map.getZoom()
    5. });

    矢量图形（折线、面、圆形等覆盖物）

    官方代码示例

    多边形 polygon

    ```json var polygon = new AMap.Polygon({ map: this.map, //设置多边形边界路径 path: [[107.359808, 29.680201],[107.720983, 29.702271],[107.338522, 29.962572]], strokeColor: “#6BD9FE”, //线颜色 strokeOpacity: 1, //线透明度 strokeWeight: 2, //线宽 fillColor: “#4D89FF”, //填充色 fillOpacity: 0.14//填充透明度 }); / 自定义属性 polygon.getExtData() 获取用户自定义属性/ polygon[‘layerType’] = ‘互通区域矩形’;

/ new AMap.Polygon中不写map字段则需要在外边写添加到地图实例 / //this.map.add(polygon);

/添加到数组里便于循环删除等操作/ this.polygonMarkerlist.push(polygon);

  1. <a name="DH6RE"></a>
  2. #### 
  3. <a name="X4DJH"></a>
  4. #### **折线** Polyline 
  5. ```json
  6. this.polyline = new AMap.Polyline({
  7.     map: this.map,
  8.     path: [[107.359808, 29.680201],[107.720983, 29.702271],[107.338522, 29.962572]],
  9.     borderWeight: 1, // 线条宽度，默认为 1
  10.     strokeColor: '#5EF3F9', // 线条颜色
  11. });

  • 动态画线

    1. this.linePath.push([data.lon, data.lat])
    2. // todo 折线总长没有限制
    3. this.polyline.setPath(this.linePath.slice())

    获取覆盖物

  • 可以使用 getAllOverlays (type) 方法获取已经添加的覆盖物。其中type参数类型包括marker、circle、polyline、polygon，缺省是返回以上所有类型所有覆盖物。 ```json // 获取已经添加的覆盖物 map.getAllOverlays();

// 获取已经添加的marker map.getAllOverlays(‘marker’);

// 获取自定义图层 for (let j = 0; j < allOverlay.length; j++) { / 创建marker时 自定义字段 / if (allOverlay[j].layer == ‘mark_layer’) { allOverlay[j].hide(); } }

  1. <a name="QmdMy"></a>
  2. ### 获取覆盖物自定义属性
  3. ```json
  4. var marker = new AMap.Marker({
  5.     position:point,
  6.     map: this.map,
  7.     content:content,//自定义dom
  8.     offset: new AMap.Pixel(-17, -42),// 相对于基点的偏移位置
  9.     extData:{data:data,type:'lcd'},//自定义数据
  10. });
  11. this.markerList.push(marker)
  12. /* 获取marker extData自定义的数据 */
  13. marker.getExtData()

根据自定义属性查找矢量图删除

  1. this.markerList.forEach(item => {
  2.        if(item.getExtData().index == index){
  3.              this.map.remove(item)
  4.              this.lineMarkerList.splice(index, 1)
  5.        }
  6. })

setContent 覆盖物动态更改内容

  1. let markerList = [];
  3. var marker = new AMap.Marker({
  4.   position:[116.397428, 39.90923],
  5.   map: this.map,
  6.   content:content,//自定义dom
  7.   offset: new AMap.Pixel(-17, -42),// 相对于基点的偏移位置
  8.   extData:{data:data,type:'lcd'},//自定义数据
  9. });
  11. markerList.push(marker)
  13. for(var i = 0; i > markerList.length; i++){
  14.   this.markerList[i].setContent(
  15.     `<div>自定义dom</div>`
  16.   )
  17. }

覆盖物显示隐藏

  1. polygon.show()
  2. polygon.hide()

移出覆盖物

  • 使用remove方法移除覆盖物，参数可以为单个覆盖物对象，也可以是一个包括多个覆盖物的数组 ```json // 单独移除点标记 map.remove(marker); // 同时移除点标记和矢量圆形 map.remove([marker,circle]);

// 使用clearMap方法删除所有覆盖物 map.clearMap();

  1. <a name="aHLfk"></a>
  2. ### 覆盖物群组(图层)
  3. [官方代码示例](https://lbs.amap.com/api/jsapi-v2/guide/overlays/overlaygroup)
  4. ```json
  5.  export default {
  6.    data(){
  7.      return{
  8.        map:null,
  9.        roadlineOverlayGroup: null, //覆盖物群组图层
  10.      }
  11.    },
  12.    methods:{
  13.       /* 创建拥堵图层*/
  14.         creatRoadlayGroup(){
  15.             this.roadlineOverlayGroup = new AMap.OverlayGroup();
  16.             // 统一添加到地图实例上
  17.             this.map.add(this.roadlineOverlayGroup);
  18.         },
  19.         setLineArr(){
  20.             // 绘制轨迹
  21.             let polyline = new AMap.Polyline({
  22.                 map: this.map,
  23.                 path: lineArr,
  24.                 showDir: true,
  25.                 strokeColor: "#28F",  //线颜色
  26.                 strokeWeight: 6,      //线宽
  27.             });
  28.             // 创建覆盖物群组，传入覆盖物组成的数组
  29.             this.roadlineOverlayGroup.addOverlay(polyline);
  30.         }
  31.    }
  33.  }
  1. //对覆盖物群组进行统一的展示隐藏操作
  2. this.roadlineOverlayGroup.show();
  3. this.roadlineOverlayGroup.hide();
  5. //对覆盖物群组进行清空操作
  6. this.roadlineOverlayGroup.setMap(null)
  8. // 添加新的覆盖物到群组
  9. this.roadlineOverlayGroup.addOverlay(polyline3);
  11. // 移除群组中的一个覆盖物
  12. this.roadlineOverlayGroup.removeOverlay(polyline1);

图层显示、隐藏、移出

  • 图层显示、隐藏及移出 ```json layer.hide() // 图层隐藏

layer.show() // 图层显示

/ 通过setMap(null)可以彻底移除图层。 / layer.setMap(null);

  1. <a name="hxJHK"></a>
  2. ### 区域查找中心点
  4. - 经度纬度单独相加除经纬度的个数求平均值就是中心点
  5. ```json
  6. //经纬度平均数找中心点
  7. sumLngLat(arr) {
  8.   var s = 0;
  9.   var d = 0;
  10.   for (var i = arr.length - 1; i >= 0; i--) {
  11.     s += arr[i].lng;
  12.     d += arr[i].lat
  13.   }
  14.   var lnglat = [s / arr.length, d / arr.length];
  15.   return lnglat;
  16. },