vue使用腾讯地图（三）标注

添加标注

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
vue使用腾讯地图（三）标注https://www.jianshu.com/p/eca4f20ee1cb
vue使用腾讯地图（四）定位实战qq.maps.Geolocation

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容