高德地图覆盖物的添加和工具类的使用

下面是自己在使用高德地图后的总结，方便日后查看

使用高德地图首先需要引入：

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.CustomLayer,AMap.Autocomplete,AMap.PlaceSearch,AMap.PolyEditor,AMap.DistrictSearch,AMap.Geocoder,AMap.MouseTool,AMap.Driving"></script>

需要注意的是申请完后注意的安全密钥，key值需要配合安全密钥使用，不然某些功能无法使用，例如根据关键字搜索

 可以参考  高德开放平台：

 在这里按照操作申请key值和对安全密钥的配置

页面效果：

 

 通过点击添加点位、绘制折线、绘制多边形、绘制矩形和绘制圆形来开启对应的工具类进行添加覆盖物。

点击清除手动添加的覆盖物清除通过工具类添加的覆盖物。

点击清除默认添加的覆盖物清除初始化时添加的覆盖物。（或者清除不是通过工具类添加的覆盖物）

清除覆盖物操作可根据条件判断清除某一类或者某一个或全部，对于清除全部请阅读官方文档。

下面是代码，可以直接复制后自己实验

我对高德地图的容器#container设置的宽高为100%，不显示地图请查看#container元素的高度

<template>
  <div id="container">
    <div class="button_click">
      <el-button @click="addMouseToolClick('marker')" type="primary" size="mini">添加点位</el-button>
      <el-button @click="addMouseToolClick('polyline')" type="primary" size="mini">绘制折线</el-button>
      <el-button @click="addMouseToolClick('polygon')" type="primary" size="mini">绘制多边形</el-button>
      <el-button @click="addMouseToolClick('rectangle')" type="primary" size="mini">绘制矩形</el-button>
      <el-button @click="addMouseToolClick('circle')" type="primary" size="mini">绘制圆形</el-button>
      <el-button @click="clearClick" type="primary" size="mini">清除手动添加的覆盖物</el-button>
      <el-button @click="clear" type="primary" size="mini">清除默认添加的覆盖物</el-button>
      <el-input v-model="input" placeholder="请输入内容" style="margin-left:20px;"></el-input>
      <el-button @click="search" type="primary" size="mini">搜索</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      map:'',
      satellite:'',
      tileLayer:'',
      marker:'',
      markers:[],
      infoWindow:'',
      polyline:'',
      polylines:[],
      polygon:'',
      polygons:[],
      rectangle:'',
      rectangles:[],
      circle:'',
      circles:[],
      mouseTool:'',
      mouseToolList:[],
      type:'',
      input:'',
      markerList:[
        [119.155623,35.406421],[119.166523,35.395437],[119.184977,35.399355],[119.197336,35.412647],[119.178797,35.413556]
      ],
      polylineList:[
        [[119.147726, 35.411598],[119.150559, 35.400824],[119.167467, 35.402713],[119.172102, 35.40845],[119.177681, 35.400614]],
        [[119.169613, 35.415445],[119.177424, 35.40789],[119.182059, 35.407121],[119.180256, 35.403763]],
        [[119.182488, 35.411808],[119.189783, 35.40831],[119.193131, 35.416075],[119.209782, 35.416214]]
      ],
      polygonList:[
        [[119.143091, 35.394947],[119.141546, 35.384521],[119.152619, 35.38816]],
        [[119.140688, 35.381792],[119.140516, 35.371435],[119.151589, 35.371155],[119.152533, 35.381372]],
        [[119.147383, 35.369055],[119.145666, 35.365766],[119.141718, 35.365486],[119.14558, 35.363666],[119.143349, 35.361636],[119.14704, 35.362826],[119.149014, 35.361076],[119.148842, 35.363806],[119.15382, 35.364856],[119.148585, 35.365696]]
      ],
      rectangleList:[
        {southWest:[119.175965, 35.381162],northEast:[119.185492, 35.390469]},
        {southWest:[119.157339, 35.383402],northEast:[119.167381, 35.391309]},
        {southWest:[119.159914, 35.373114],northEast:[119.181887, 35.379483]}
      ],
      circleList:[
        {center:[119.196564, 35.367445],radius:924.059},
        {center:[119.198281, 35.38823],radius:1109.610},
        {center:[119.20961, 35.376754],radius:414.997},
      ]
    }
  },
  mounted(){
    this.$nextTick(()=>{
      this.startMap()
    })
  },
  methods:{
    startMap() {
      //创建高德地图对象
      this.map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 14,
        features : ['bg','point','road','building'],
        center: [119.21476,35.390924],
        zooms: [3, 16],
        mapStyle: "amap://styles/normal",
      });

      //卫星切片图层对象
      // this.satellite = new AMap.TileLayer.Satellite({
      //   map: this.map,
      // });

      //普通图层
      this.tileLayer = new AMap.TileLayer({
        map: this.map,
      });

      this.addMarker()
      this.addPolyline()
      this.addPolygon()
      this.addRectangle()
      this.addCircle()
      this.map.on('click', this.showInfoClick);//点击地图触发的方法
      this.mouseTool = new AMap.MouseTool(this.map)//创建工具类对象
      this.mouseTool.on('draw',this.mouseToolClick)//工具类添加完成后触发的方法
    },
    showInfoClick(e) {
      console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
    },
    // 添加marker点
    addMarker(){
      let startIcon=new AMap.Icon({
        size:new AMap.Size(20,20),
        image:require('/public/images/wastwater.png'),
        imageSize:new AMap.Size(20,20),
        imageOffset:new AMap.Pixel(0,0)
      })
      this.infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -30),
        zIndex: 200,
      });
      this.markerList.forEach((item,index)=>{
        let html=`高德地图Marker${index+1}的信息窗`
        this.marker = new AMap.Marker({
          map: this.map,
          icon: startIcon,
          position: item,
          offset: new AMap.Pixel(-13, -30),
          content:'<div class="markerClass"></div>',//自定义覆盖物,
          label: {
            zIndex: 52,
            content: `高德地图Marker${index+1}`,
            offset: new AMap.Pixel(24, 0),
          },
        });
        this.marker.on('click', this.markerClick);
        this.marker.content = html;
        this.markers.push(this.marker);
      })
    },
    //marker点的信息窗
    markerClick(e){
      this.infoWindow.setContent(e.target.content);
      this.infoWindow.open(this.map, e.target.getPosition());
    },
    addPolyline(){
      this.polylineList.forEach(item=>{
        this.polyline=new AMap.Polyline({
          map: this.map,
          path:item,
          strokeColor:'#1dfdcc',//线条颜色
          strokeOpacity:1,//透明度[0-1]
          strokeWeight:3,//线条宽度
        })
        this.polylines.push(this.polyline)
      })
    },
    addPolygon(){
      this.polygonList.forEach(item=>{
        this.polygon=new AMap.Polygon({
          map:this.map,
          path:item,
          strokeColor:'#a900fb',//线条颜色
          strokeOpacity:1,//线条透明度[0-1]
          strokeWeight:3,//线条宽度
          fillColor:'#a900fb',//多边形的填充色
          fillOpacity:0.5,//填充色透明度
        })
        this.polygons.push(this.polygon)
      })
    },
    addRectangle(){
      this.rectangleList.forEach(item=>{
        let southWest=new AMap.LngLat(item.southWest[0],item.southWest[1])
        let northEast=new AMap.LngLat(item.northEast[0],item.northEast[1])
        let bounds=new AMap.Bounds(southWest,northEast)
        this.rectangle=new AMap.Rectangle({
          map:this.map,
          bounds:bounds,
          strokeColor:'#f78d01',//线条颜色
          strokeOpacity:1,//线条透明度[0-1]
          strokeWeight:3,//线条宽度
          fillColor:'#f78d01',//矩形的填充色
          fillOpacity:0.5,//填充色透明度
        })
        this.rectangles.push(this.rectangle)
      })
    },
    addCircle(){
      this.circleList.forEach(item=>{
        this.circle=new AMap.Circle({
          // map:this.map,
          center:item.center,
          radius:item.radius,
          strokeColor:'#12ff12',//线条颜色
          strokeOpacity:1,//线条透明度[0-1]
          strokeWeight:3,//线条宽度
          fillColor:'#12ff12',//圆形的填充色
          fillOpacity:0.5,//填充色透明度
        })
        this.circle.setMap(this.map)
        this.circles.push(this.circle)
      })
    },
    clear(){
      this.map.remove(this.markers)
      this.map.remove(this.polylines)
      this.map.remove(this.polygons)
      this.map.remove(this.rectangles)
      this.map.remove(this.circles)
    },

    addMouseToolClick(type){
      this.type=type
      switch(type){
        case 'marker'://工具类点标记添加
          this.mouseTool.marker({
            icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
            offset: new AMap.Pixel(-12, -17),
          });
          break;
        case 'polyline'://工具类折线添加
          this.mouseTool.polyline({
            strokeColor:'#00d8ff',//线条颜色
            strokeOpacity:1,//透明度[0-1]
            strokeWeight:3,//线条宽度
          });
          break;
        case 'polygon'://工具类多边形添加
          this.mouseTool.polygon({
            strokeColor:'#01a1ed',//线条颜色
            strokeOpacity:1,//线条透明度[0-1]
            strokeWeight:3,//线条宽度
            fillColor:'#01a1ed',//多边形的填充色
            fillOpacity:0.5,//填充色透明度
          });
          break;
        case 'rectangle'://工具类矩形添加
          this.mouseTool.rectangle({
            strokeColor:'#eeff24',//线条颜色
            strokeOpacity:1,//线条透明度[0-1]
            strokeWeight:3,//线条宽度
            fillColor:'#eeff24',//矩形的填充色
            fillOpacity:0.5,//填充色透明度
          });
          break;
        case 'circle'://工具类圆形添加
          this.mouseTool.circle({
            strokeColor:'#12ff12',//线条颜色
            strokeOpacity:1,//线条透明度[0-1]
            strokeWeight:3,//线条宽度
            fillColor:'#12ff12',//圆形的填充色
            fillOpacity:0.5,//填充色透明度
          });
          break;
        default: break;//其他工具类都差不多的操作
      }
    },
    clearClick(){
      // if (this.mouseTool.overlays.marker) this.map.remove(this.mouseTool.overlays.marker);
      //意思为如果当前是点标记的添加就清除之前添加的点标记
      this.map.remove(this.mouseTool.overlays.marker);//清除所有 通过添加点标记工具 添加的点标记
      this.map.remove(this.mouseTool.overlays.polyline);//清除所有 通过添加折线工具 添加的线条
      this.map.remove(this.mouseTool.overlays.polygon);//清除所有 通过添加多边形工具 添加的多边形
      this.map.remove(this.mouseTool.overlays.rectangle);//清除所有 通过添加矩形工具 添加的矩形
      this.map.remove(this.mouseTool.overlays.circle);//清除所有 通过添加圆形工具 添加的圆形
      // this.map.remove(this.mouseToolList)
      //清除操作  对应下方在工具类添加完成时（push）保存的对象
    },
    mouseToolClick(e){
      if(this.type==='marker'){
        this.mouseToolList.push(e.obj)
        //保存添加的覆盖物对象，用于后续操作，如果仅仅只是用来清除添加的覆盖物，在这里可以不需要写，用清除手动添加的覆盖物按钮触发的方法比较简单
        let position=[e.obj._opts.position.lng,e.obj._opts.position.lat]
        console.log(position)
        // this.map.setZoomAndCenter(14, position)
        //把添加的点位设置为地图的中心点
      }else if(this.type==='polyline'){
        let position=[]
        e.obj._opts.path.forEach(item=>{
          position.push([item[0],item[1]])
        })
        console.log(position)
      }else if(this.type==='polygon'){
        let position=[]
        e.obj._opts.path.forEach(item=>{
          position.push([item[0],item[1]])
        })
        console.log(position)
      }else if(this.type==='rectangle'){
        let bounds=e.obj._opts.bounds
        let position={
          southWest:[bounds.southWest.lng,bounds.southWest.lat],
          northEast:[bounds.northEast.lng,bounds.northEast.lat],
        }
        console.log(position);
      }else if(this.type==='circle'){
        console.log(e);
        let opts=e.obj._opts
        let position={
          center:[opts.center.lng,opts.center.lat],
          radius:opts.radius
        }
        console.log(position);
      }
    },

    search(){
      this.autoInput(this.input)
    },
    autoInput(val) {
      console.log(val);
      var that = this;
      AMap.plugin('AMap.PlaceSearch', function() {
        var autoOptions = {
          city: '全国',
        }
        var placeSearch = new AMap.PlaceSearch(autoOptions);
        placeSearch.search(val, function(status, result) {
          console.log(result);
          var longitude = result.poiList.pois[0].location.lng;
          var latitude = result.poiList.pois[0].location.lat;
          var position = (longitude + ',' + latitude).split(',');
          that.searchMarker(position);
        })
      })
    },
    searchMarker(position) {
      this.map.setZoomAndCenter(14, position)
    },
  }
}
</script>

<style lang="scss">
.markerClass {
  // margin-left: 100px;
  // margin-top: 100px;
  width: 22px;
  height: 22px;
  /*transform: translate3d(0px, 0px, 0px);*/
  position: relative;
  outline: none;
  //  background-color: #dd524d;
  background-image: url("../../../public/images/wastwater.png");
  box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
  // border-radius: 100%;
  transform-origin: 0 0;
  display: block;
  opacity: 0.7;
}
.markerClass::after {
  content: "";
  -webkit-border-radius: 100%;
  border-radius: 100%;
  height: 300%;
  width: 300%;
  position: absolute;
  margin: -100% 0 0 -100%;
  box-shadow: 0 0 6px 2px #dd524d;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite; /*无穷反复*/
  animation-delay: 1.1s;
}

@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  50% {
    opacity: 1;
    filter: none;
  }
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
</style>
<style scoped>
#container{
  width: 100%;
  height: 100%;
}
.button_click{
  position: absolute;
  display: flex;
}
</style>