VUE学习（六） 高德地图常用功能总结

项目中使用地图的场景比较多，将常用的功能整理一下，方便后期使用。

 

目录

 

1.地图的引入

2.地图在页面显示

3.点标记

3.1快速点标记

3.2点标记详细配置

4.圆形、方形、多边形标记

4.1创建圆形

4.2创建多边形

4.3创建长方形

5.地图操作

5.1清空地图

5.2清空单个图形对象

5.3地图最佳视野调整

5.4地图点击事件

6.路径规划

         6.1已知起点终点，自动规划

6.2手动在地图上点击起点和终点

---

1.地图的引入

高德地图需要我们在项目最外层引入，也就是在public/index.html中直接引入。代码如下

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=yourkey"></script>

 其中将key的内容替换为高德的开发者key（高德地图开发者key申请），注册一个即可。

2.地图在页面显示

想要地图在页面上显示出来，需要一个承载地图的容器--div，代码如下

<div class="map" id="i-map" ref="map"></div>

 初始化地图组件

  mounted() {
    this.map = new AMap.Map('i-map')
  },

一定要用id来注册地图组件，注册成功后，就可以使用this.map来操作的图了。通过上述操作，地图并未在页面展示，因为我们只声明了一个div并未给它高度，需要定义地图的高度，宽度自适应即可。下面是CSS代码

.map
  width 100%
  height 500px

这样，地图就出来了。

3.点标记

3.1快速点标记

常用的场景就是显示某一坐标的位置。

    
    markerPoint(iconUrl, lnglat) {
      let marker = new AMap.Marker({
        icon: iconUrl,
        position: lnglat
      });
      marker.setMap(this.map);
    },

iconUrl:需要展示的图标路径

lnglat:坐标的位置。//[x,y]

3.2点标记详细配置

    markerPoint(iconUrl, lnglat) {
          let marker = new AMap.Marker({
            icon: new AMap.Icon({
              size: new AMap.Size(14, 34),//图标大小
              image: iconUrl,
              imageSize: new AMap.Size(14, 34)//图片大小
            }),
            angle: 80,//角度
            offset: new AMap.Pixel(-7, -17),//图标偏移
            position: lnglat
          });
          marker.setMap(this.map);
    },

通过上述代码，可以对图像进行相应的移动，使图像在目标点的合适位置展示。

4.圆形、方形、多边形标记

针对上述功能，本地对高德的接口稍作封装。

//创建圆形对象  
//center: