高德地图JS

修改点击的标记点图标

for (const [index, item] of new Map(this.treeData.map((item, index) => [index, item]))) {
    //marker点
    let marker
    //位置
    let position
    //判断是否是第一个点
    if (index === 0) { // 如果是第一个点位则使他突出显示
        position = new AMap.LngLat(item.longitude, item.latitude)
        //设置marker，并设置为唯一图标
        marker = new AMap.Marker({ icon: lampIconActive, position: position, offset: new AMap.Pixel(-17, -10) })
        //this.activeMarker为VUE data中存储的当前的活动标记点，初始化地图点位时默认为数据中的第一个点
        this.activeMarker = 0
        map.add(marker)
    } else {//不是第一个，设置为其他图标
        position = new AMap.LngLat(item.longitude, item.latitude)
        marker = new AMap.Marker({ icon: lampIcon, position: position, offset: new AMap.Pixel(-17, -10) })
        map.add(marker)
    }
    //吧marker存入vue data中
    this.allMarkers.push(marker)
    //marker为 map 的点位，并为此点位设置click事件
    marker.on('click', e => {
      //设置当前地图高度与中心点
       map.setZoomAndCenter(centerFloor, e.target.getPosition())
        //this.activeMarker为VUE data中存储的当前的活动标记点
       //设置之前点位唯一图标为其他图标
        this.allMarkers[this.activeMarker].setIcon(lampIcon)
        //查找当前点击的点在allMarkers中的index位置，并设置activeMarker为其index
        for (var i = 0;i < this.allMarkers.length;i++) {
            if (this.allMarkers[i]._amap_id === e.target._amap_id) {
                this.activeMarker = i
            }
        }
        //设置当前click点的图标为唯一图标
        e.target.setIcon(lampIconActive)
    })
}