vue 中引入高德地图，自定义信息窗体，点标记

（参考官方文档：高德地图）

1.引入

在index.html中引入

  <script src="https://webapi.amap.com/maps?v=1.4.1&key=0d78256ea89beeb8c25d1cd047549d1f"></script>
  <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

2.页面中添加高德地图

// html
<div id="map-area"></div>
// js 在mounted里面进行
	data() {
	    return {
	    mapMarker: [ // 点标记数组
	    {
	    address:'上海市徐汇区小木桥路470号',
	    id: "d4378a71945248fe8ab4e1f3af20628e",
		latitudeGD: 31.19331,
		level: "市级",
		longitudeGD: 121.460609,
		name: "上海市公共法律服务中心",
		url: "http://sh.12348.gov.cn/sites/12348/zxspace/org-detail.jsp?entityId=d4378a71945248fe8ab4e1f3af20628e"
		},
		{
		address: "南丹东路60号",
		id: "d4378a718fc14dd996b83bb7f1ea1d46",
		latitudeGD: 31.190249,
		level: "区级",
		longitudeGD: 121.444415,
		name: "徐汇区公共法律服务中心",
		url: "http://sh.12348.gov.cn/sites/12348/zxspace/org-detail.jsp?entityId=d4378a718fc14dd996b83bb7f1ea1d46"
		}
	    ],
	   }
	},
  mounted() {
    this.setMapChart();
  }
  methods：{
  setMapChart() {
      // 创建地图实例
      this.map = new AMap.Map('map-area', {
        zoom: 13, // 级别
        zooms: [8, 18],
        resizeEnable: true,// 是否监控地图容器尺寸变化
        mapStyle: "amap://styles/blue", // 地图主题
      });
      // 以下是各类方法，光初始化上面代码就行
      this.infoWindow = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: this.createInfoWindow('服务区', ''),
        offset: new AMap.Pixel(16, -25)
      });
      // zoom变化时，触发方法
      this.map.on('zoomend', ()=> {
        let zoom = this.map.getZoom()
        // console.log('zoom', zoom)
        if(zoom > 11) {
          // console.log('超过了')
          this.setMarker(this.mapMarker)
        }else {
          this.map.remove(this.allMarker)
        }
      });
      this.setCity('310104')
    },
      // 设置地图当前行政区
    setCity(Location) {
      let that = this;
      this.map.setCity(Location, ()=> {
        this.map.setZoom(14);
      });
    },
    // 设置地图marker
    setMarker(markerList) {
      this.map.remove(this.allMarker)
      this.allMarker= []
      markerList.map((e) => {
        var marker = new AMap.Marker({
          position: new AMap.LngLat(e.longitudeGD, e.latitudeGD),
          icon: this.markerIcon,
          offset: new AMap.Pixel(-13, -30)
        });
        marker.name = e.name;
        marker.url = e.url
        marker.on('mouseover', e => {
          this.infoWindow.setContent(this.createInfoWindow(e.target.name, e.target.url));
          // console.log('markerMouseOver',e)
          this.infoWindow.open(this.map, e.target.getPosition());
        });
        marker.on('mouseout', e => {
          this.map.clearInfoWindow();
        });
        marker.on('click', e => {
          console.log(111, e);
          if(e.lnglat) {
            console.log(222);
            window.open(e.target.url);
          }
        });
        marker.emit('click', { target: marker });
       
        this.allMarker.push(marker)
      })
       // 将 markers 添加到地图
        this.map.add(this.allMarker);
    },
    // 自定义信息窗体
    createInfoWindow(title, url) {
      let info = '<a style="display: block;font-size: .18rem;background-color: rgba(30,105,204,.8);color: #DDEBF5;padding: .15rem;border-radius: .04rem;text-decoration:none;" href="' + url + '" target="_blank">'+ title +'</a>'
        return info;
    },
  }

3.页面效果

点标记和信息窗体都可以点击