高德地图添加标记点

高德地图添加标记点

<template>
  <div></div>
</template>
<script>
import util from "@/utils/util"
import locationUtils from '@/utils/locationUtils'
export default {
  components: {},
  props: {},
  data () {
    return {
      map: null,
      icon: new AMap.Icon({
        size: new AMap.Size(60, 60),    // 图标尺寸
        image: require("@/assets/images/position.svg"),  // Icon的图像
        imageSize: new AMap.Size(60, 60)   // 根据所设置的大小拉伸或压缩图片
      }),
      iconActive: new AMap.Icon({
        size: new AMap.Size(60, 60),    // 图标尺寸
        image: require("@/assets/images/positionActive.svg"),  // Icon的图像
        imageSize: new AMap.Size(60, 60)   // 根据所设置的大小拉伸或压缩图片
      }),
      markList:[]
    };
  },
  watch: {},
  computed: {},
  methods: {
    setTages (arry, map,tagesType=false) {
      let that = this
      if (!map) return
      // 清除地图的覆盖物
      map.clearMap()
      this.markList = []
      arry.map(ele => {
        // 转换天地图经纬度到高德地图
        let lat = locationUtils.wgs84Togcj02(ele.longitude, ele.latitude)
        if(tagesType == 'onlyShow'){
          let marker = new AMap.Marker({
            position: new AMap.LngLat(lat[0], lat[1]),
            icon: this.iconActive
          });
          map.add(marker);
          return
        }
        // 设置标记点
        let marker = new AMap.Marker({
          position: new AMap.LngLat(lat[0], lat[1]),
          icon: this.icon
        });
         marker.on('click', (e)=>{
           that.setDefult()
           map.setZoomAndCenter(18,new AMap.LngLat(lat[0], lat[1]),false,500)
           marker.setIcon(that.iconActive)
           if(that.$parent.showDetail){
             that.$parent.showDetail(ele)
           }
         });
         this.markList.push(marker)
        map.add(marker);
      })
      /**SetFitView,效果就是可以自动适应显示你想显示的范围区域，举个简单的应用场景，
       * 比如一个点在海南，另一个点在东北，那么使用了这个方法，显示的将是从南到北
       * 的整个中国区域，而如果是一个点在天安门，另一个在故宫，使用这个方法后，那么显示的只会是二环内的区域了。
       * 那么问题是:如果我本来地图上就有很多点，默认显示 区域为整个北京，但是我从数据库中取出的数据的几个点仅仅只在三环内，
       * 如何在取出数据后，自适应的只显示到这部分的几个点呢？ 
       * var map = new AMap.Map("container",{
            resizeEnable:true,
            zoom:12,
            center:[116.397428, 39.90923]
          })
          //东北
          var m = new AMap.Marker({
                position: [121.851547,52.762852],
                map:map
            });
            //海南
          var m2 = new AMap.Marker({
                position: [109.439743,18.529034],
                map:map
          });
          //希望自适应展示的部分的点
          var markers = [], positions = [[116.405467, 39.907761], [116.415467, 39.907761], [116.415467, 39.917761], [116.425467, 39.907761], [116.385467, 39.907761]];
          for (var i = 0, marker; i < positions.length; i++) {
              marker = new AMap.Marker({
                  map: map,
                  icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b'+(i+1)+'.png',
                  position: positions[i]
              });
              markers.push(marker);
          }
          //------------------------------------
          //		    map.setFitView();  如果直接这样写，默认是把东北和海南的点都展示出来，
          //但是希望只自适应的展示markers里的5个点
          //-----------------------------------------------------------------------------------------------------
          //1.把想自适应的部分的点装在一个透明的覆盖物图层里
          var polygon = new AMap.Polygon({
            path : positions,  //以5个点的坐标创建一个隐藏的多边形
            map:map,
            strokeOpacity:0,//透明
            fillOpacity:0,//透明
            bubble:true//事件穿透到地图
          });
          var overlaysList = map.getAllOverlays('polygon');//获取多边形图层
          
          //2.使用setFitView方法
          map.setFitView(overlaysList);//自适应显示
      */
      map.setFitView()
    },
    setDefult(){
      this.markList.map(ele=>{
        ele.setIcon(this.icon)
      })
    },
  },
  created () { },
  mounted () { }
};
</script>
<style lang="scss" scoped>
</style>