vue使用高德地图点击标记点出现自定义信息窗体

高德地图点击标记点出现自定义信息窗体

效果图：

场景： 例如点击地图中的某台共享单车，显示他的电量，状态等。

页面自定义窗体html结构，然后通过点击标记点，得到坐标，将其定位上去。（高德内置方法）

html：

<div class="device-info" id="device-info" ref="deviceInfo">
    <pclass="device-click-tlite">{{deviceMapData.output.selectItem.deviceName}}</p>
     <p>设备类型：{{deviceMapData.output.selectItem.deviceType}}</p>
     <p>设备编码：{{deviceMapData.output.selectItem.sn}}</p>
     <p>设备运行状态：<span class="">{{deviceMapData.output.selectItem.deviceStatus}}</span></p>
</div>

初始化地图：

 initMap () {
    // 初始化地图
    map = new AMap.Map('map-gaode', {
      resizeEnable: true,
      zoom:6,
      // crs:'EPSG4326'
    })

    this.infoWindow = new AMap.InfoWindow({
      isCustom: true,  //使用自定义窗体
      // closeWhenClickMap: true,   //点击地图隐藏窗体
      content: '',
      offset: new AMap.Pixel(0, -52)
    })
  }

绘制标记点的时候为标记点绑定点击事件：

this.deviceMapData.output.value.curProData.forEach((item,index)=>{
      //循环单点绘制  不能自定义icon
      let marker = new AMap.Marker({
        icon: new AMap.Icon({            
          image: shuangQiang,
          size: new AMap.Size(50, 50),  //图标大小
          imageSize: new AMap.Size(50,50),
        }),
        position: [item.lng,item.lat],
        offset: new AMap.Pixel(-24, -48)
      });
      //给marker添加属性
      marker.setExtData(item)
      
      marker.setMap(map);
      //给marker添加点击事件
      marker.on('click', (e)=>{
        console.log('点击',e.target.getExtData())
        this.deviceMapData.output.selectItem = item
        this.deviceMapData.input.visible = true
        this.infoWindow.setContent(this.$refs.deviceInfo)
        this.infoWindow.open(map, marker.getPosition())
      })
    })