标签：qq map 调用 定位 H5 maps 腾讯 var position

获取当前定位的经纬度并在容器内显示当前位置 (安卓上的位置有点偏差)

在vue的index.html中需要引用

template

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

javaScript

<script>
export defalut {
    data(){
        return {
            longitude:0,//经度
            latitude:0,//纬度
            city:''
        }
    },
    mounted(){
        this.getMyLocation(); //腾讯地图定位当前的位置
    },
    methods: {
        //第一部分
        //定位获得当前位置信息
        getMyLocation() {
            var geolocation = new qq.maps.Geolocation("you key", "youkeyname");
            //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;
            console.log(this.latitude,'this.latitude',this.longitude,'this.longitude',this.city,'this.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: 100,               //设置地图缩放级别
              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:'这是我当前的位置，偏差有点大，哈哈'
            });
        }
    }
    
}
</script>

相关文档：

1. 路线规划：https://lbs.qq.com/guides/direction.html

2. 简单地图示例：https://lbs.qq.com/javascript_v2/case-run.html#sample-map

3. 配置密码：https://lbs.qq.com/dev/console/key/manage

4. java根据经纬度查询门店地理位置-完美解决附近门店问题: https://www.cnblogs.com/fuzongle/p/11327688.html

5. 腾讯地图前端定位组件: https://lbs.qq.com/tool/component-geolocation.html

标签：qq,map,调用,定位,H5,maps,腾讯,var,position
来源： https://www.cnblogs.com/wangRong-smile/p/12022147.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。