位置: IT常识 - 正文

vue - vue使用腾讯api进行定位获取,绘制地图、标点、搜索、路线规划(vue ng)

编辑:rootadmin
vue - vue使用腾讯api进行定位获取,绘制地图、标点、搜索、路线规划 章节目录1,前言2,准备3,开始引入api4,获取定位5,绘制地图和标点6,关键字搜索功能7,驾车线路规划8,两点经纬度的直线距离计算9,使用过程中的一些常见问题10,参考链接1,前言

推荐整理分享vue - vue使用腾讯api进行定位获取,绘制地图、标点、搜索、路线规划(vue ng),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue ng,腾讯vue范斌,vue项目部署到腾讯云,腾讯vue范斌,vue项目部署到腾讯云,腾讯vue框架,vue vh,腾讯vue范斌,内容如对您有帮助,希望把文章链接给更多的朋友!

首本文主要记录一下在Vue项目里面使用腾讯地图api实现的一些功能。如:引入腾讯地图SDK、定位获取当前经纬度和详细地址、地图marker的使用、关键字搜索功能和路线规划。

我这边实现的效果图如下:

2,准备

首先要成为腾讯位置服务开发者或者使用公司提供的key值;才可以使用腾讯地图api,我这里使用的是公司提供的key值;

详细介绍见官网:https://lbs.qq.com/webApi/javascriptGL/glGuide/glBasic

3,开始引入api

在vue项目中的根路径下public文件夹的index.html中引入一些api;如下:

<!DOCTYPE html><html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, minimum-scale=1"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>微视频后台管理</title> 这三个文件是新引入的腾讯地图的api 注意:key值是必须要填的 是一串字符串 <script type="text/javascript" src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script> <script type="text/javascript" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=这里是您的key值"></script> <script type="text/javascript" src="https://map.qq.com/api/gljs?v=1.exp&key=这里是您的key值"></script> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> </body></html>4,获取定位

先在mounted生命周期初始化Geolocation定位组件这个类;showPosition是获取成功的回调;里面存放着当前地址的经纬度和详细地址信息;

mounted() { // 1,初始化腾讯地图 this.geolocation = new qq.maps.Geolocation('你的key值', 'myapp'); // 2,并且开始定位 this.getMyLocation(); }, methods:{ // 获取当前位置 getMyLocation() { this.geolocation.getLocation(this.showPosition, this.errorPosition); //开启定位 }, // 定位成功 showPosition(position) { console.log('定位成功'); this.longitude = position.lng; this.latitude = position.lat; this.queryParams.address = position.city + position.province + position.addr; // 定位成功后开始绘制地图 this.setMap(); }, // 定位失败 继续尝试定位 errorPosition(e) { console.log('定位失败,再次进行定位'); // 此判断是防止多次绘制地图 if(!this.map){ this.getMyLocation(); } }, }5,绘制地图和标点

上一步获取定位成功后我这边直接调用setMap方法进行了绘制地图的操作;并以当前为中心点进行标点;如下: 注意:绘制地图需要有一个容器(Dom节点);

/* * setMap 此方法主要是绘制地图和地图标点 * 绘制地图 * 绘制地图演示:https://lbs.qq.com/webDemoCenter/glAPI/glMap/createMap * 地图标点演示:https://lbs.qq.com/webDemoCenter/glAPI/glMarker/glImagetext * 路线规划演示:https://lbs.qq.com/webDemoCenter/glAPI/glPolyline/polylineRoutePlan */ setMap() { // 防止重复绘制地图 if(this.map) { return; }; // 获取存放地图的容器 this.mapEl = document.getElementById('mapItem'); //设置地图中心点 this.startPosition = new TMap.LatLng(this.latitude, this.longitude); //定义工厂模式函数 var myOptions = { rotation: 20, //设置地图旋转角度 pitch: 30, //设置俯仰角度(0~45) zoom: 12, //设置地图缩放级别 center: this.startPosition, //设置地图中心点坐标 // mapTypeId: window.TMap.MapTypeId.ROADMAP, //设置地图样式详情参见MapType }; try { // 开始生成地图 this.map = new TMap.Map(this.mapEl, myOptions); } catch (error) { console.error('error:', error); } // 地图标点官方演示请见:https://lbs.qq.com/webDemoCenter/glAPI/glMarker/glImagetext new TMap.MultiMarker({ map: this.map, //指定地图容器 styles: { // 点标记样式 marker1: new TMap.MarkerStyle({ width: 20, // 样式宽 height: 30, // 样式高 anchor: { x: 10, y: 30 }, // 描点位置 }), }, // 点标记数据数组 geometries: [ { id: 'demo', styleId: 'marker1', // 和上面styles里面的marker1 向对应 position: new TMap.LatLng(this.latitude, this.longitude), // 标点的位置 properties: { title: 'marker', }, }, ], }); },6,关键字搜索功能

输入地址然后点击搜索按钮进行搜索;如下图: 注意:搜索到的地址列表(searchList )然后使用抽屉组件并通过列表显示出来;点击每一项可以获取它的详细地址和经纬度信息;

/* 点击搜索 搜索地址列表 * 官方演示地址为:https://lbs.qq.com/webDemoCenter/glAPI/glServiceLib/suggestion */ onSearch() { this.searchItem = new TMap.service.Search({ pageSize: 10 }); // 搜索类 this.suggest = new TMap.service.Suggestion({ pageSize: 10, // 返回结果每页条目数 region: this.city, // 限制城市范围 regionFix: true, // 搜索无结果时是否固定在当前城市 }); if (this.onSearchValue) { // 请求腾讯地图接口 this.suggest.getSuggestions({ keyword: this.onSearchValue, location: this.map.getCenter() }).then((result) => { this.searchList = result.data; if (typeof this.searchList == 'object') { this.souShow = true; } }); } else { Toast('请输入地点再进行搜索!'); } },

7,驾车线路规划

线路规划需要有起点和终点的经纬度;起点就是当前定位的经纬度,终点就是用户选择的地址的经纬度;方法如下:

/* 路线规划方法 * 参数:前两个参数是起点的经纬度 后两个参数是终点的经纬度 */ goToThere(startLat,startLng,endLat,endLng) { let startPosition = new TMap.LatLng(startLat, startLng); // 路线规划起点 let endPosition = new TMap.LatLng(endLat, endLng); // 路线规划起点 // 然后开始规划路线 this.destination.marker = new TMap.MultiMarker({ // 创造MultiMarker创建起点和终点的标点样式 id: 'marker-layer', map: this.map,// 使用之前已经绘制好的地图 进行起点和终点的标点 styles: { start: new TMap.MarkerStyle({ width: 25, height: 35, anchor: { x: 16, y: 32 }, src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png', }), end: new TMap.MarkerStyle({ width: 25, height: 35, anchor: { x: 16, y: 32 }, src: 'https://www.yuucn.com/wp-content/uploads/2023/05/1684747564-4492477ec7fd065.png', }), }, //点标记数据数组 geometries: [ { id: 'start', styleId: 'start', position:startPosition, }, { id: 'end', styleId: 'end', position: endPosition, }, ], }); /* 驾车路线规划链接:https://lbs.qq.com/webDemoCenter/glAPI/glServiceLib/driving 路线规划演示:https://lbs.qq.com/webDemoCenter/glAPI/glPolyline/polylineRoutePlan */ //新建一个驾车路线规划类 this.destination.driving = new TMap.service.Driving({ mp: false, // 是否返回多方案 policy: 'PICKUP,NAV_POINT_FIRST', // 规划策略 }); this.destination.driving.search({ from: startPosition, to: endPosition }).then((result) => { // 搜索路径 案例这边展示的是第一个中情况 // result.result.routes[0].steps.forEach((step, index) => { // document.getElementById('instruction').innerHTML += `<p>${index + 1}. ${step.instruction}</p>`; // }); // 展示路线引导 有可能是多条路线的展示 this.queryParams.routesList = JSON.stringify(result.result.routes); result.result.routes.map((item, index) => { this.displayPolyline(item.polyline, index); }); // 关闭抽屉 this.souShow = false; }); }, // 绘制路径折线样式 displayPolyline(pl, num) { // 第一次进来这个判断是不成立的 if (this.polylineLayer) { // updateGeometries 这个方法是更新图层 this.polylineLayer.updateGeometries([ { id: `p_${num}`, styleId: `style_${num}`, //和下面的styleID一一对应 paths: pl, }, ]); } else { // TMap.MultiPolyline 此方法用来构建折线 (地图线路规划) this.polylineLayer = new TMap.MultiPolyline({ id: 'polyline-layer', map: this.map, styles: { style_0: new TMap.PolylineStyle({ color: '#11CA53', //线填充色 width: 6, //折线宽度 borderWidth: 0, //边线宽度 borderColor: '#11CA53', //边线颜色 lineCap: 'round', //线端头方式 }), style_1: new TMap.PolylineStyle({ color: '#3777FF', width: 6, borderWidth: 0, borderColor: '#3777FF', lineCap: 'round', }), style_2: new TMap.PolylineStyle({ color: '#CC0000', //线填充色 width: 6, //折线宽度 borderWidth: 0, //边线宽度 borderColor: '#CC0000', //边线颜色 lineCap: 'round', //线端头方式 }), }, geometries: [ { id: `p_0`, styleId: `style_0`, paths: pl, }, ], }); } },8,两点经纬度的直线距离计算

首先要引入一个js库,还是在public文件夹下的index.html中:

key=“输入您的key值”

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=geometry"></script> // 调用腾讯地图的距离计算api computeDistance() { try { // 起始点的经纬度 let start = new TMap.LatLng(this.latitude, this.longitude); // 终点的经纬度 let end = new TMap.LatLng(this.toLatitude, this.toLongitude); let path = [start, end]; let distance = TMap.geometry.computeDistance(path); // 调用腾讯api console.log("腾讯地图api计算的距离:", distance.toFixed(2) + "米"); //保留两位小数 返回的单位是米 return distance.toFixed(2); } catch (error) { console.log("error:", error); } },9,使用过程中的一些常见问题

vue - vue使用腾讯api进行定位获取,绘制地图、标点、搜索、路线规划(vue ng)

1,Cannot read properties of null (reading id)

没有正确获取到Dom元素,也就是地图的容器(document.getElementById(“mapEl”)):如下图:

原因:因为我这边是使用vantUi的 popup弹出层组件,当点击某个事件才弹出,其中popup组件默认是惰性加载的(不弹出不加载);也就是页面第一次进来没有加载节点;

而我在mounted()函数中又直接渲染地图了:new TMap.Map(document.getElementById("mapEl"), options)所以会报这个错误;

解决: 在popup弹出层组件上添加 :lazy-render="false"属性,不让惰性加载


2,far < = 0 且地图没有渲染出来的是空白

这个问题和第一个问题比较像,虽然拿到了dom节点,但是没有渲染出来;

原因: 我把挂载地图的容器 设置 display:none了(或放在popup组件直接加载了 即使设置了惰性加载为false也不管用),然后在popup弹出时才设置 display:block 这样做虽然容器节点获取到了,但腾讯地图渲染又有问题了;

解决: 不要直接放在popup弹出层里面,先把挂载地图的容器放在最外面,让其正常加载,使用css属性visibility: hidden来进行隐藏元素(占文档流高度);

<!--防止地图没有渲染 --> <div class="mapElContainer"> <div id="mapEl"></div> </div>// 样式这样设置.mapElContainer { #mapEl { width: 100%; height: 4.8rem; visibility: hidden; }}

然后在popup组件弹出的时候,动态appendChild添加节点,并在样式上去掉visibility属性;如下:

// 弹出的时候 showPopup() {// 这个mapContainerEl 节点是popup里面的父组件 let mapContainerEl = document.getElementsByClassName("mapContainer")[0]; let mapEl = document.getElementById("mapEl"); // 动态添加地图渲染节点 if (mapContainerEl) { mapContainerEl.appendChild(mapEl); } }, // popup组件里面节点的样式.mapContainer { overflow: hidden; // 此处要去掉visibility属性 否则还是不可见 #mapEl { width: 100%; height: 5rem; }}

最终效果图如下:

Eed;

10,参考链接

[1]绘制地图演示: https://lbs.qq.com/webDemoCenter/glAPI/glMap/createMap

[2]地图标点演示: https://lbs.qq.com/webDemoCenter/glAPI/glMarker/glImagetext

[3]路线规划演示: https://lbs.qq.com/webDemoCenter/glAPI/glPolyline/polylineRoutePlan

[4]驾车路线规划链接: https://lbs.qq.com/webDemoCenter/glAPI/glServiceLib/driving

本文链接地址:https://www.jiuchutong.com/zhishi/287083.html 转载请保留说明!

上一篇:vite配置postcss-autoprefixer,实现自动添加css属性前缀(vite配置详解)

下一篇:最贵的鼠标是什么(世界上最贵的鼠标是用什么做的)

  • 抖音主页访客怎么关闭(抖音主页访客怎么看)

    抖音主页访客怎么关闭(抖音主页访客怎么看)

  • 手机信号旁边的hd怎么关闭(手机信号旁边的hd什么意思)

    手机信号旁边的hd怎么关闭(手机信号旁边的hd什么意思)

  • 拼多多系统繁忙(拼多多系统繁忙怎么破)

    拼多多系统繁忙(拼多多系统繁忙怎么破)

  • 微信文件撤回时间多长(微信文件撤回时长3小时)

    微信文件撤回时间多长(微信文件撤回时长3小时)

  • qq在另一个手机上登录能看到聊天记录吗(qq在另一个手机上登录会有提示吗)

    qq在另一个手机上登录能看到聊天记录吗(qq在另一个手机上登录会有提示吗)

  • cad测量线长快捷键(cad测量线长命令)

    cad测量线长快捷键(cad测量线长命令)

  • 微信前往验证是什么意思(微信前往验证是对方加我吗)

    微信前往验证是什么意思(微信前往验证是对方加我吗)

  • ipad能连接打印机吗(ipad连接打印机教程)

    ipad能连接打印机吗(ipad连接打印机教程)

  • 怎么解决手机自动暂停(怎么解决手机自动关机的问题)

    怎么解决手机自动暂停(怎么解决手机自动关机的问题)

  • 为什么复制链接在淘宝打不开(为什么复制链接跳不出来了)

    为什么复制链接在淘宝打不开(为什么复制链接跳不出来了)

  • qq视频录制对方会知道吗(qq视频录制对方能听到吗)

    qq视频录制对方会知道吗(qq视频录制对方能听到吗)

  • 图形驱动程序有用么(图形驱动程序有哪些)

    图形驱动程序有用么(图形驱动程序有哪些)

  • 苹果更新怎么取消更新(苹果更新怎么取消订阅)

    苹果更新怎么取消更新(苹果更新怎么取消订阅)

  • 苹果手机锁屏旁白怎么关闭(苹果手机锁屏旁白)

    苹果手机锁屏旁白怎么关闭(苹果手机锁屏旁白)

  • 在拼多多买东西付了钱没有订单怎么办(在拼多多买东西好友能看见吗)

    在拼多多买东西付了钱没有订单怎么办(在拼多多买东西好友能看见吗)

  • 手机数据线怎么用(手机数据线怎么传输视频到电脑)

    手机数据线怎么用(手机数据线怎么传输视频到电脑)

  • 苹果lte网络是什么意思(苹果 lte)

    苹果lte网络是什么意思(苹果 lte)

  • 电脑怎么保存文件(电脑怎么保存文件里的图片)

    电脑怎么保存文件(电脑怎么保存文件里的图片)

  • 台式电脑怎么强制关机(台式电脑怎么强制解除开机密码)

    台式电脑怎么强制关机(台式电脑怎么强制解除开机密码)

  • qq群成员名片在哪找(qq中群成员名片在哪)

    qq群成员名片在哪找(qq中群成员名片在哪)

  • 通信系统必须具备的三个基本要素(通信系统必须具备的能力)

    通信系统必须具备的三个基本要素(通信系统必须具备的能力)

  • 抖音收藏的商品怎么删除(抖音收藏的商品怎么批量删除)

    抖音收藏的商品怎么删除(抖音收藏的商品怎么批量删除)

  • 华为手机步数和微信不同步(华为手机步数和微信步数不同步怎么办)

    华为手机步数和微信不同步(华为手机步数和微信步数不同步怎么办)

  • 微信好友来源朋友验证消息(微信 好友来源)

    微信好友来源朋友验证消息(微信 好友来源)

  • 对外捐赠固定资产属于营业外支出吗
  • 稳岗返还入什么科目
  • 职工罚款收入计入什么科目
  • 写字楼租金税率
  • 企业所得税纳税调增调减怎么确定
  • 核定征收企业股权转让所得税
  • 不含税销售收入含消费税吗
  • 非货币性资产投资印花税
  • 盈余公积补亏什么科目
  • 没有合同可以收违约金
  • 超市顾客返利如何做账务处理?
  • 建筑施工企业工伤保险费率
  • 材料成本和加工费含税吗
  • 供应商不给我们开发票,我怎么入账
  • 什么情况下发票不能冲红
  • 单位装饰
  • 包工不包料会计处理
  • 安全生产费纳税调整政策
  • 201金8税盘抵扣期限是多久?
  • 怎么确定高新产品
  • 小微企业所得税优惠政策最新2022
  • 增值税适用范围和税率
  • 银行汇票的背书转让金额
  • 生产企业销售原材料所取得的收入属于( )
  • 土地闲置费能否扣除
  • 会计差错更正的准则依据
  • 公益性捐赠增值税申报表怎么填
  • 制作广告费用
  • 小规模开票软件服务费账务处理
  • 五险一金的会计分录怎么写
  • 营运资金管理策略有哪些
  • 内部交易逆流如何算利润
  • 周转材料属于什么科目
  • macqq怎么查看删除好友
  • 在win7中如何设置屏幕保护程序
  • php获取农历日期
  • 为什么浏览器自动打开
  • 怎么解决在澳洲吸烟
  • 小程序码生成器在线制作
  • 企业存货成本包括利润吗
  • 包装物押金收入计入收入总额吗
  • PHP:mcrypt_module_self_test()的用法_Mcrypt函数
  • 个人转让门面的法律规定
  • 预提费用新会计准则叫什么科目
  • 在海里的章鱼
  • el-switch右对齐
  • html游戏大全
  • last命令详解
  • php destruct
  • 是否就地汇总纳税
  • 利润分配反映什么
  • 减免残保金的操作方法
  • 视同销售收入税法处理?
  • 发票打印错误如何修改
  • 普通动产和特殊动产物权变动
  • 年度纳税申报时间
  • 年度汇算清缴后补税,账务要调整吗
  • 公司收到社保打款怎么办
  • 预付卡充值可以退吗
  • 收到其他公司往来款怎么做账
  • 印花税需要计提吗2023
  • 公司需要现金
  • 发票开预付卡充值可以计入费用吗?
  • 延期支票可以撤回吗
  • 手写发票还能用么
  • 预提费用取消了怎么调整
  • linux 对比文件
  • windows7个性化菜单
  • winxp软件双击后没有反应
  • win7系统如何设置
  • mtr.exe
  • win7无法保存对权限所作的更改
  • win10麦克风无法说话
  • win7浏览器怎么升级到最新版
  • android 音频焦点丢失 媒体按键
  • java回收机制原理
  • 各类扩展名
  • linux shell脚本攻略(第3版)
  • jquery使用Cookie和JSON记录用户最近浏览历史
  • 中国进口奶粉关税税率表2019
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设