vue使用腾讯地图（四）定位实战qq.maps.Geolocation

• 引入js包（这个是固定的用这个链接就可以）

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

小伙伴们用的时候可以一步一步去实现，保证每一步都实现后再进行下一步

image.png

image.png

作者：前端来入坑
链接：https://www.jianshu.com/p/87429518c596