uniapp(全端兼容) - 实现地图位置标点或搜索位置名称“一键导航“功能，唤起手机导航App软件（高德地图、百度地图、腾讯地图）导航页面，如果用户手机没有安装地图app，则跳转到各家地图网页版导航

于 2024-09-22 22:07:19 发布
阅读量2.8k 收藏 3
点赞数 13
分类专栏： 前端组件与功能(开箱即用) 文章标签： uni-app 唤起第三方地图导航软件app 高德地图 百度地图 腾讯地图 检测本机是否安装导航app 跳转打开百度高德腾讯地图网页版
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/142443441
版权

效果图

在uni-app 微信小程序/手机h5网页网站/安卓app/苹果app/支付宝小程序/nvue等（全平台完美兼容）开发中，实现uniApp各端都兼容的 “展示地图标点定位或任意位置信息，携带经纬度数据调起客户本机中的第三方导航软件（腾讯地图/百度地图/高德地图）”，如果手机没有安装导航应用app的话，以网页形式调用打开第三方导航所对应的网站版导航页面，携带目的地数据信息，从而实现一键导航、导航接力效果功能，提供详细示例代码。

uniapp Vue3和Vue2都能用，新手小白直接复制源码运行后简单修改即可。

在这里插入图片描述

全部代码

如下代码所示，运行查看即可。

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
uniapp [全端兼容] - 详细实现引入使用 Google 谷歌地图显示及搜索城市地点，提供地图标点、地址搜索、定位导航、中文显示及汉化、地图打位置标点显示、搜索框搜索功能、省市区详细经纬度数据等
王佳斌
07-04 2083
uniapp，h5移动端网页，微信小程序，Android，苹果ios，app，nvue，谷歌地图，官方，谷歌官方文档，google map，申请key，uniApp谷歌地图，详细使用教程，无法访问，集成谷歌地图，app引入谷歌地图，选点定位，地图导航，位置搜索，城市搜索，文字地点模糊查询，地点省市区详细数据，经纬度信息，markers地图标记点，一直报错怎么办，接入google地图不显示报错，谷歌地图插件，vue3，vue2，组件，Key申请流程，谷歌key怎么申请，api文档，网站打不开，用什么插件，在u
uniapp开发h5项目使用baidu-map组件实现地图引入，定位渲染，弹窗功能实现，根据定位路线图的实现
m0_72929120的博客
03-20 1267
【代码】uniapp开发h5项目使用baidu-map组件实现地图引入，定位渲染，弹窗功能实现，根据定位路线图的实现。
uniapp map 制作一个简单的地图导航
qq_43402051的博客
04-30 7735
uniapp map 制作简单地图导航
uniapp H5调起手机地图应用或跳转网页版实现地图导航功能
m0_72929120的博客
07-05 4526
【代码】uniapp H5调起手机地图应用或跳转网页版实现地图导航功能。
uniapp h5地图导航
颜浩的博客
12-02 2460
uniapp h5地图导航 view部分 <label @click="daohang">导航</label> js部分 export default { data(){ return { } }, onLoad(){ }, methods: { //方法一 //daohang(){ // let latitude = ''; // let longitude = ''; // let pos
uniapp h5端地图导航功能
maoge_666的博客
04-14 3434
uniapp h5端地图导航功能 提供3种地图选择 通过地址名称获取坐标
uniapp H5打开地图
最新发布
weixin_45811884的博客
06-24 488
【代码】uniapp H5打开地图。
uniapp(全端兼容) - 最新详细实现腾讯地图轨迹回放功能，uniapp腾讯地图点击按钮播放地图绘制的轨迹，并自定义在轨道上行驶的汽车图片图标、汽车顶部文字信息、自定义轨道样式（详细示例运行代码）
高级前端工程师
05-17 3862
uni-app，腾讯地图，地图轨迹，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，在腾讯地图上画行驶轨迹并让一辆车在上面跑，如何在uniapp小程序中实现腾讯地图轨迹回放，在uni-app所有平台上兼容腾讯地图，报错，uniapp中实现实时定位和轨迹回放，汽车沿轨迹行驶功能，使用腾讯地图api实现轨迹回放，腾讯地图轨迹移动用什么API，显示小车轨迹动画回放，UniApp使用腾讯API地图、路线轨迹、marker标记点，对车辆行驶轨迹进行轨迹
uniapp(全端兼容) - 最新详细实现预览pdf文件功能，uniapp安卓苹果app、H5网页、微信小程序、nvue等端打开本地或在线PDF文档进行预览，uniapp预览pdf教程（详细示例代码）
高级前端工程师
06-06 6092
uni-app，pdf，打开预览PDF，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，uniapp预览PDF，App端 实现pdf文件预览，在app端怎么预览pdf，网页h5怎么预览pdf，pdf下载、上传和预览，H5预览pdf文件，小程序预览pdf，nvue平台怎么打开预览pdf呢，除了uni.opendocument还有什么方法打开，预览pdf的插件，pdf预览组件，uni-app实现PDF预览功能，app查看下载pdf文件，如何做pd
uniapp(全端兼容) - 最新详细实现pdf在线预览功能，uniapp内置预览PDF文件功能，uniapp在安卓app|苹果app|h5网页网站|微信小程序中打开pdf进行在线预览（详细示例源码）
高级前端工程师
05-09 3579
uni-app，安卓Android，苹果ios，App端，H5网页，移动端网站，微信小程序，支付宝小程序，nvue，vue，pdf文档，pdf文件，office，uniapp 预览pdf，uniapp怎么做pdf预览，uniapp如何实现全平台兼容的pdf在线预览，uniapp怎么在h5打开pdf文档，实现PDF在线预览，H5移动端文件预览pdf，文件下载和预览，uniapp App端pdf文件预览，app移动端在线预览pdf文件，无法预览pdf怎么办，有没有预览pdf的插件，根本打不开咋办，uniapp使
uni-app h5页面唤起地图软件
cloki的博客
09-28 779
uni-app h5页面唤起地图软件
UNIAPP H5调起手机地图应用或跳转网页版实现导航功能
Front小思的博客
06-13 2577
用户通过点击选择使用百度还是高德地图，点击后调用guide方法，判断设备上是否有高德或者百度APP，有就直接调用APP，如果没有就调用网页版
H5唤起地图导航路线，唤起高德地图app,百度地图，腾讯
wwf1225的博客
10-18 5904
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 = '上海市';
uniapp H5调起手机地图应用或跳转网页版实现导航功能
maoge_666的博客
04-06 1282
uniapp H5调起手机地图应用或跳转网页版实现导航功能
uniapp web-view 小程序内嵌H5 打开地图 唤起APP
扑街仔小贵的博客
04-14 2094
uniapp开发小程序内嵌H5 打开地图查看地点的位置 唤起手机上的地图APP进行导航等操作
uniapp h5 腾讯地图根据经纬度显示位置，并打开手机导航
xw245184020的专栏
08-04 8502
1、安装jweixin-module包 npm i -sjweixin-module 2、在根目录下新建common文件夹并在文件夹下新建wx-sdk.js const jweixin = require('jweixin-module'); export default { //判断是否在微信中 isWechat: function() { var ua = window.navigator.userAgent.toLowerCase(); return ua.match(/m.
uniapp地图导航
m0_74170441的博客
06-11 462
我这里的数据都是动态的，想测试的朋友可以写固定值。最后我们选择之后将会直接跳转到app进行导航。然后跳转之后首先会调到选择软件导航。点击导航之后会显示使用哪个app。我们只需要给图标加一个点击事件。
Uniapp之使用h5+打开地图导航
抚首
12-03 3424
需求：点击某一个按钮打开地图导航 1.判断当前设备平台 2.判断需要使用的地图APP是否存在 3.存在则调用地图APP，不存在则进行提示 接下来就是直接上代码： function openMap(latitude,longitude,name){ let url = ""; if (plus.os.name == "Android") { let hasBaiduMap = plus.runtime.isApplicationExist({ .
uniapp - 强力覆盖 checkbox 复选框样式兼容全端app
11-11
Uniapp是一个基于Vue.js的跨平台应用开发框架，它强力覆盖了checkbox复选框样式，使得复选框在不同的移动端app上都能有良好的兼容性。 在Uniapp中，开发者可以通过简单的代码实现复选框的样式定制和覆盖。这意味着无论是在iOS、Android还是其他移动平台上，复选框的样式都能够被统一，并且可自定义。这对于开发者来说是非常方便的，他们不需要为不同平台去逐个调整复选框的样式，而是可以直接在Uniapp中进行统一的定制。 另外，Uniapp还支持使用flex布局来布置和调整复选框组件，这使得复选框的样式和布局更加灵活和方便。而且，Uniapp还提供了丰富的组件和插件库，开发者可以根据需要选择合适的组件来实现复选框的样式兼容。 总的来说，Uniapp强力覆盖了checkbox复选框样式，使得复选框在全端app中都能够有良好的兼容性。它提供了灵活的定制和布局方式，同时支持丰富的组件和插件库，使得开发者能够更加便捷地实现复选框样式的兼容。因此，在Uniapp中开发复选框组件，可以获得更好的开发体验和更广泛的应用范围。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

街尾杂货店&

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

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

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

打赏作者

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

抵扣说明：

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

余额充值