关于腾讯地图:vue接入腾讯地图二标注定位实战

34次阅读

共计 2244 个字符，预计需要花费 6 分钟才能阅读完成。

vue 接入腾讯地图 (一)【点击事件】请参考：
https://segmentfault.com/a/1190000023890670

增加标注

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

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

引入 js 包（留神：vue 我的项目得在首页的 index.html 外面引入）

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>
// 这个是固定的用这个链接就能够
<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

三步走

<template>
    <div id="container" style="width:600px;height:500px;"></div>
</template>

<script>
    export default{
        name:'news',
        data() {
            return {
                longitude:0,// 经度
                latitude:0,// 纬度
                city:''
            }
        },
        methods:{
  // 第一局部
              // 定位取得以后地位信息
            getMyLocation() {var geolocation = new qq.maps.Geolocation("yourkey", "yourkey 名称");
                geolocation.getIpLocation(this.showPosition, this.showErr);
                //geolocation.getLocation(this.showPosition, this.showErr);// 或者用 getLocation 精确度比拟高
            },
            showPosition(position) {console.log(position);
                this.latitude = position.lat;
                this.longitude = position.lng;
                this.city = position.city;
                this.setMap();},
            showErr() {console.log("定位失败");
                this.getMyLocation();// 定位失败再申请定位，测试应用},
// 第二局部
        // 地位信息在地图上展现
            setMap() {// 步骤：定义 map 变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
                // 设置地图中心点
                var myLatlng = new qq.maps.LatLng(this.latitude,this.longitude);
                // 定义工厂模式函数
                var myOptions = {
                  zoom: 13,               // 设置地图缩放级别
                  center: myLatlng,    // 设置中心点款式
                  mapTypeId: qq.maps.MapTypeId.ROADMAP  // 设置地图款式详情参见 MapType
                }
                // // 获取 dom 元素增加地图信息
                var map = new qq.maps.Map(document.getElementById("container"), myOptions);
// 第三局部
              // 给定位的地位增加图片标注
                var marker = new qq.maps.Marker({
                    position: myLatlng,
                    map: map
                });
                // 给定位的地位增加文本标注
                var marker = new qq.maps.Label({
                    position: myLatlng,
                    map: map,
                    content:'这是我以后的地位，偏差有点大，哈哈'
                });
            }
          },
        mounted() {this.getMyLocation();
            }
        }
</script>

开发者用的时候能够一步一步去实现，保障每一步都实现后再进行下一步

申请 key 地址

https://lbs.qq.com/console/my…

官网文档

https://lbs.qq.com/tool/compo…
https://lbs.qq.com/javascript…