zoukankan      html  css  js  c++  java
  • H5调用腾讯地图

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

    在vue的index.html中需要引用

    template

    <div id="container" style="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

  • 相关阅读:
    [LeetCode]4Sum
    [LeetCode]3Sum
    [LeetCode]Two Sum
    [LeetCode]Maximal Rectangle
    [LeetCode]Largest Rectangle in Histogram
    [LeetCode]Sudoku Solver
    [LeetCode]Group Anagrams
    jQuery验证控件jquery.validate.js使用说明+中文API
    js操作cookie,实现登录密码保存
    Java中getResourceAsStream的用法
  • 原文地址:https://www.cnblogs.com/wangRong-smile/p/12022147.html
Copyright © 2011-2022 走看看