1. 程式人生 > 其它 >關於VUE使用高德JsApi(三)——操作map物件案例

關於VUE使用高德JsApi(三)——操作map物件案例

案例一 新增點標記

建立一個方法

  //傳入map物件、座標點、自定義圖片、響應方法
    mMarkers(map,positions,imgUrl,click){
      let img=new AMap.Icon({
        // 圖示尺寸
        size: new AMap.Size(50, 50),
        // 圖示的取圖地址
        image: imgUrl,
        // 圖示所用圖片大小
        imageSize: new AMap.Size(50, 50),
        // 圖示取圖偏移量
        imageOffset: new AMap.Pixel(-9, -3)
    });

        var markers = [];
        for (var i = 0, marker; i < positions.length; i++) {
            marker = new AMap.Marker({
                map: map,//最終都是繫結到map物件中的
                position: positions[i],
                icon: img,
                offset: new AMap.Pixel(-13, -30),
            });
            marker.on('click',click);//點標記點選響應方法
            marker.setTitle('阿巴阿巴');//當前點標記文字標籤
            markers.push(marker);
        }
        return markers;
      }

使用

let img='//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png';
 let positions = [[xxx,xxx]];
let axb=this.mMarkers(this.map,positions,img,(e)=>{
console.log(e);//e是當前點標記的引數
});  
this.map.remove(axb);//刪除當前所有點標記