Vue.js学习Vue驿站前端技术

vue使用腾讯地图(三)标注

2018-10-11  本文已影响29人  前端来入坑

添加标注

var marker = new qq.maps.Marker({
    position: myLatlng ,
    map: map
});

文本标注

var marker = new qq.maps.Label({
    position: myLatlng,
    map: map,
    content:'文本标注'
});

效果


image.png

自定义标注图标

    var anchor = new qq.maps.Point(300, 0),
          size = new qq.maps.Size(600, 680),
          origin = new qq.maps.Point(-150, 0),
          markerIcon = new qq.maps.MarkerImage(
      "/static/images/position.png",
      size, 
      origin,
      anchor
    );
    marker.setIcon(markerIcon);

我的预览


image.png

附上我的定位logo


position.png

官网预览https://lbs.qq.com/javascript_v2/case-run.html#sample-overlay-addmarkerimage

image.png
为什么会有这么大区别呢,因为这是图片的问题一个大一个小,还需要稍加调整,展示官网定位图片
marker.png

vue使用腾讯地图(一)https://www.jianshu.com/p/130cdbd07394
vue使用腾讯地图(二)事件https://www.jianshu.com/p/0ce29aec5f47

上一篇下一篇

猜你喜欢

热点阅读