vue接入腾讯地图(二)【标注&定位实战】

vue接入腾讯地图(一)【点击事件】请参考：
https://blog.csdn.net/weixin_45628602/article/details/108401673

1、【标注】

添加标注

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

文本标注

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

效果

自定义标注图标

    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);

预览

定位logo

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

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

2、【定位实战→qq.maps.Geolocation】

• 引入js包（注意：vue项目得在首页的index.html里面引入）

//这个是固定的用这个链接就可以

三步走

开发者用的时候可以一步一步去实现，保证每一步都实现后再进行下一步

申请key地址

https://lbs.qq.com/console/mykey.html

官方文档

https://lbs.qq.com/tool/component-geolocation.html
https://lbs.qq.com/javascript_v2/guide-start.html

以上内容转载自前端来入坑的文章《vue使用腾讯地图（三）标注》

链接：https://www.jianshu.com/p/eca4f20ee1cb

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。