vue项目使用腾讯地图获取定位

好奇的菜鸟

已于 2023-06-07 17:17:43 修改

阅读量7.9k

点赞数 5

分类专栏：前端文章标签： vue.js javascript 前端

于 2020-11-19 13:46:22 首次发布

本文链接：https://blog.csdn.net/qq_29752857/article/details/109809248

版权

前端专栏收录该内容

74 篇文章 1 订阅

订阅专栏

一、注册成为腾讯地图开发者

https://lbs.qq.com/

创建新秘钥

https://lbs.qq.com/dev/console/key/manage

根据页面提示填写相关信息

复制你的秘钥

二、vue中index.html中里引入需要的js文件

注意填写你的密钥

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0 user-scalable=no" >
    <title>demo</title>
  </head>  
  <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的密钥"></script>
  <script src="https://map.qq.com/api/gljs?v=1.exp&key=你的密钥"></script>
  <script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
  <body>
    <div id="app" style="background-color: antiquewhite;">       
    </div>   
  </body>
</html>

<script>
</script>

三、在需要位置服务的页面初始化地图并获取位置

写到methods:{}里边，

 init() {
      //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
      //设置地图中心点
      let lat, lng;
      var that = this;
      var geolocation = new qq.maps.Geolocation(
        "你的密钥",
        "myapp"
      );
      var myLatlng;

      var geoloc = geolocation.getLocation(
        function (position) {
          lat = position.lat;
          lng = position.lng;
          myLatlng = new qq.maps.LatLng(lat, lng);
          //定义工厂模式函数
          var myOptions = {
            zoom: 20, //设置地图缩放级别
            center: myLatlng, //设置中心点样式
            mapTypeId: qq.maps.MapTypeId.ROADMAP, //设置地图样式详情参见MapType
          };
          //获取dom元素添加地图信息
          var map = new qq.maps.Map(
            document.getElementById("container"),
            myOptions
          );

          var listener = qq.maps.event.addListener(map, "click", function (
            event
          ) {
            console.info("mouseup", event);
            that.latLng = event.latLng;
            setTimeout(function () {
              var lat = parseFloat(that.latLng.lat);
              var lng = parseFloat(that.latLng.lng);
              var latLng = new qq.maps.LatLng(lat, lng);
              //对指定经纬度进行解析
              that.geocoder.getAddress(latLng);
            }, 50);
          });

          that.geocoder = new qq.maps.Geocoder();
          //设置服务请求成功的回调函数
          that.geocoder.setComplete(function (result) {
            console.info("result", result);

            that.positionName = result.detail.address;
            that.locationDetails.address = result.detail.address;
            that.locationDetails.addressComponents =
              result.detail.addressComponents;
            that.locationDetails.location = result.detail.location;
            that.locationDetails.nearPois = result.detail.nearPois;
            that.show = false;

            map.setCenter(result.detail.location);
            var marker = new qq.maps.Marker({
              map: map,
              position: result.detail.location,
            });
            //点击Marker会弹出反查结果
            qq.maps.event.addListener(marker, "click", function () {
              alert("坐标地址为： " + result.detail.location);
              that.$toast("result.detail.location");
            });
          });

          //若服务请求失败，则运行以下函数
          that.geocoder.setError(function () {
            alert("出错了，请输入正确的地址！！！");
          });
        },
        null,
        { timeout: 500, failTipFlag: true }
      );
    },

mounted() {
    this.init();
  },

 <div class="block" id="container" @ontouchend="choicemap"></div>

好奇的菜鸟

关注

5
点赞
踩
22

收藏

觉得还不错? 一键收藏
6
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录