关于VUE使用高德JsApi(三)——操作map对象案例

高德v1.4示例中心

高德v1.4参考手册

案例一 添加点标记

创建一个方法

  //传入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);//删除当前所有点标记 

注:不光要看示例、一定要看文档、避免做无用功(Q_Q)

posted @ 2021-06-29 16:56  藏久  阅读(410)  评论(0)    收藏  举报