vue H5移动端项目使用高德地图定位/标点并点击导航跳第三方app且实现导航路线——实例

已于 2023-02-14 15:50:34 修改
阅读量6.4k 收藏 31
点赞数 6
分类专栏： Vue H5移动端项目 高德地图 文章标签： vue 组件化 高德地图 vue-cli4 移动端
于 2021-11-24 15:56:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cwin8951/article/details/121515188
版权

一、最终效果

1、全量定位

在这里插入图片描述

2、获取当前位置定位

在这里插入图片描述

3、标点后回显选点的地址

在这里插入图片描述
在这里插入图片描述

4、点击导航，打开弹窗选择高德地图，会进入第三方app中显示路线

在这里插入图片描述
在这里插入图片描述

5、地图已经封装成一个组件（AMapComponents），testMap页面只有一句代码

在这里插入图片描述

二、 组件码云地址

注意点：

  • 地图导航按钮是是异步组件（需要渲染template标签），需要在配置文件（vue.config.js）加上runtimeCompiler: true
  • 需要按下面方式引入，才能调用new AMap
    在这里插入图片描述

在这里插入图片描述

wocwin
关注
专栏目录
vue2/3 - 最新详细使用高德地图进行路线规划和详细途径路段信息，vue高德地图实现起点和终点路径高亮显示在地图上，并计算出整个路途公里数、预计到达时间、驾驶导航详细步骤信息（详细示例代码直接复制
高级前端工程师
05-11 3769
vue2，vue3，高德地图，vue高德地图，起点到终点，地图轨迹，路径规划，驾车轨迹图，利用高德地图实现车辆的路线规划，高德地图轨迹绘制，路段详细导航信息，vue实现高德地图路线规划功能，规划路线后如何获取途径的路段信息，途径数据，导航，导航详细数据，vue导航规划，导航路线规划绘制，导航规划后怎么获得途径的各路段，vue3使用高德地图，vue高德地图实现路线规划（含途经点），途径点详细数据，高德地图途径点怎么获取，行车路径规划 起始点+途经点，导航途径点数据用什么api，路线规划设置途经点，详细教程，高
uniapp(全端兼容) - 实现地图位置标点或搜索位置名称“一键导航“功能，唤起手机导航App软件（高德地图、百度地图、腾讯地图）导航页面，如果用户手机没有安装地图app，则跳转到各家地图网页版导航
最新发布
高级前端工程师
09-22 3409
uni-app，导航，唤起第三方导航软件，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，uniapp调起手机地图应用或跳转网页版实现地图导航功能，高德地图，百度地图，腾讯地图，展示标记点并实现一键导航，uniapp打开手机上的导航软件，uniApp如何打开手机自带的高德地图，如何打开唤起百度地图，调用百度地图导航功能，调起高德或百度地图手机应用，调起高德百度网页版实现导航功能，跳转系统已安装的地图app，跳转到高德网页版导航，web网页版，
h5vue文件使用高德地图
10-26
是一篇简短的嵌入app使用的h5的网页vue文件，里面主要包括如何在h5文件，使用高德地图jsAPI的标记，位置，定位等功能，使用者可以根据自己的具体需求，拿去稍作修改即可使用。
vue h5 安卓和ios 调用高德地图、百度地图和腾讯地图app
yangweijun970526的博客
01-23 1036
【代码】vue h5 安卓和ios 调用高德地图、百度地图和腾讯地图app。
H5中唤起百度或高德地图并规划路径
LZUGIS
08-14 591
本文分享在H5中唤起手机中的高德地图或百度地图APP，并传入起始位置规划路径。
Vue项目中跳转至百度\高德\腾讯地图第三方APP实现导航
m0_38051293的博客
09-22 9704
Vue项目中跳转至百度\高德\腾讯地图第三方APP实现导航项目需求项目实现代码实现 项目需求 项目是vue制作的webapp，通过cordova打包生成的。需要实现点击某一个位置调用第三方APP（高德地图、腾讯地图、百度地图）实现导航功能。 项目实现 查询了高德地图API、腾讯地图API、百度地图API。 了解了大致实现过程，主要是通过获取包名，传递参数，调用接口，实现相应功能。 项目使用cor...
基于vue 2.0的H5页面中使用H5自带的定位，高德地图定位，搜索周边商户，覆盖物标记，定位到当前城市
weixin_45781661的博客
11-14 2359
基于vue 2.0的H5页面中使用高德地图定位，搜索周边商户，覆盖物标记。
vue项目H5调起高德或百度地图手机应用，或调起高德百度网页版实现导航功能（已实现）
恍若c的博客
04-27 9229
需求说明：H5实现唤起高德和百度地图导航到目标景点的功能 分析：用户通过点击选择使用百度还是高德地图，点击后调用guide方法，判断设备上是否有高德或者百度APP，有就直接调用APP，如果没有就调用网页版.........
基于高德地图api,vue实现步行导航
qq_58155179的博客
03-29 902
用高德地图api实现导航功能，进入界面是获取当前地址，输入目的地就规划出路线。
在vue移动端中使用高德地图，点击按钮实现打开高德APP，点击到这里去
z18511120547的博客
02-04 2171
在vue移动端中使用高德地图，点击按钮实现打开高德APP，点击到这里去 效果图 html文件中引入高德地图秘钥 秘钥获取方法，先注册成为高德地图开发者 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你得秘钥"></script> 在模板中使用 <template> <div class="hello"> <div cla
微信小程序 - 最新详细实现内置腾讯地图上标点和唤起第三方导航软件功能，在小程序地图上标记一个位置地点并点击导航到该目的地，使用微信内置地图查看位置自定义展示文案，用户不用授权位置信息即可，点击跳转！
王佳斌
08-05 2572
微信小程序， vue2，vue3，显示地图的一个位置并导航，地图导航，点击地址可以进行导航，打开外部导航软件，调起第三方地图软件，腾讯地图，高德地图，小程序定位和导航功能，添加定位导航和地图标注功能，在内置地图上标记并点击导航，利用手机系统自带的导航软件，添加地理位置标记和地点，小程序地图开发点击标记点跳转第三方地图，微信小程序实现点击按钮然后打开第三方地图软件app如高德地图百度地图，经纬度，小程序用经度和纬度在地图上标记高亮显示位置，当点击时可使用其他地图软件导航到此，自定义位置名称详细地址地点名字，标
vue中实现高德定位功能
12-13
一、获取key及在index.htm中引入 首先需要成为高德开发者，申请到适合项目的key.并在index.html中进行引入 [removed][removed] 二、在配置文件中进行相应配置 根据vue脚手架的不用需要在不同的文件中进行配置。 我项目使用的是cli3的脚手架，需要在Vue.config.js中进行高德地图配置 externals: { 'AMap': 'AMap'
HTML5移动端导航栏
10-15
HTML5移动端导航栏
vue 项目中使用高德地图
且听风吟的博客
03-23 1717
vue 项目中使用高德地图
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 782
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
vue使用高德导航
YUlangML的博客
05-23 201
https://blog.csdn.net/qq_37831545/article/details/127056959?ops_request_misc=&request_id=&biz_id=102&utm_term=vue%E9%A1%B9%E7%9B%AE%E4%BD%BF%E7%94%A8%E9%AB%98%E5%BE%B7%E5%AF%BC%E8%88%AA%E8%B7%AF%E7%BA%BF&utm_medium=distribute.pc_search_result.none-task-blo
VUE_vue跳转第三方地图导航软件定位导航
小歪博客
02-01 2446
当前项目引用了vant弹框组件 <van-action-sheet v-model="show" description="请选择已安装APP" :actions="actions" @select="onSelect" /> export default { data() { return { show:true, actions: [{id:1, name: '腾讯地图' }, {id:2, name: '百度地图' }, {id:3,.
vue中调用高德地图
qq_37146616的博客
11-10 897
在vue中使用高德地图(vue2)
H5唤起地图导航路线，唤起高德地图app,百度地图，腾讯
wwf1225的博客
10-18 6004
from=${usrLon},${usrLat},我的位置&to=${lonEnd},${latEnd},${destination}&mode=driving&policy=1&src=mypage&coordinate=gaode&callnative=1 // 高德。const latStart='30', lonStart='120', latEnd = '31', lonEnd = '121', cityStart = '杭州市', cityEnd = '上海市';
vue移动端底部导航栏不使用第三方库代码并且可以点击切换
04-16
我可以回答这个问题。您可以使用 Vue Router 来实现一个底部导航栏，并使用路由来切换页面。您可以通过添加一个名为“active”的类来突出显示当前激活的导航栏项目。以下是一些示例代码的链接，供您参考： 1. Vue Mobile Bottom Navbar：https://github.com/vinayakkulkarni/vue-mobile-bottom-navbar 2. Vue Router Navigation Guards：https://router.vuejs.org/guide/advanced/navigation-guards.html 3. Vue Router Demo：https://github.com/vuejs/vue-router/tree/dev/examples 希望这对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wocwin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值