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

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

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

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>
目录
相关文章
|
1天前
|
JavaScript 前端开发
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
本文介绍了在JeecgBoot Vue 3项目中配置多页面入口的步骤。首先,确保下载了项目源码,然后在项目根目录创建`home.html`作为新页面模板。接着,在`src`下建立`multiPage/home`目录,包含`App.vue`和`main.ts`文件以构建新页面。最后,更新`build/vite/plugin/html.ts`中的`htmlPlugin`以支持多页面配置。完成这些步骤后,项目将具备管理多个独立页面的能力。
15 4
|
4天前
|
JavaScript
|
6天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
20 6
|
3天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
19 2
|
6天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
21 4
|
6天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
15 1
|
6天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
18 1
|
6天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
23 0
|
11天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
21 1
|
12天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint