一、需求：

在之前做的项目中，有个需求是，点击“去这里”的按钮，会调起高德地图app，并导航至目的地，如果用户未安装高德地图app，则提示用户需先下载

二、代码部分

1.获取目标地址

getContant(e){

this.location=e.target.parentElement.previousElementSibling.innerHTML;

2.调用高德地图，并将目标地址作为参数传入（根据具体需求，可以将经纬度拼接在queryStr中）

// 地图

handlClick() {

/* Start 判断手机是IOS还是安卓 */

let u = navigator.userAgent;

//判断是否安卓

let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;

// 判断是否IOS

let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

//判断是否是安卓手机

if(isAndroid) {

let queryStr = `?sid=&did=&dname=${this.location}&dev=0&t=0`

window.location.href = `amapuri://route/plan/${queryStr}`;

}else if(isIOS) {

//IOS手机————高德地图不区分ios和安卓

let queryStr = `?sid=&did=&dname=${this.location}&dev=0&t=0`

window.location.href = `amapuri://route/plan/${queryStr}`;

let startTime = Date.now();

let count = 0;

let endTime = 0;

let t = setInterval(function () {

count += 1;

endTime = Date.now() - startTime;

if (endTime > 7000) {

clearInterval(t);

}

if (count < 30) return;

}, 200);

window.onblur = function () {

clearInterval(t);

};

}

3.如果用户未安装高德地图app，需要提示用户安装

将1.处的代码替换成window.location.href = `androidamap://route/plan/${queryStr}`;
将2.处的代码替换成window.location.href = `iosamap://plan${queryStr}`;

总结：
以上就是调起高德地图的代码，欢迎大佬批评指正

H5页面中调起高德地图app，如果未安装应用，则提示用户安装相关推荐

H5页面调起高德地图APP/百度地图APP
直接通过链接跳转即可唤起高德地图APP或者百度地图APP,示例如下: var s = startAddressInfo;//起点地址信息var e = endAddressInfo;//终点地址信息i ...
html5唤起高德,h5页面唤醒百度高德地图
唤醒APP链接 //高德地图 window.location.href="androidamap://viewMap?sourceApplication=appname&poinam ...
如何实现在H5里调起高德地图APP？（下）
这一篇文章将告诉您,如果直接打开高德地图APP,并展示路线规划.适合有定位的移动设备,可以查询到从"我的位置"到目的地的路径规划,并直接导航. 场景二.调起高德地图的路线规划功能 ...
如何实现在H5里调起高德地图APP
这一篇文章将告诉您,如果直接打开高德地图APP,并展示路线规划.适合有定位的移动设备,可以查询到从"我的位置"到目的地的路径规划,并直接导航. 场景二.调起高德地图的路线规划功能 ...
在H5页面中跳转到地图App,或者在本地App中加载的H5页面跳转到地图App，唤起App进行导航
在H5中使用地图导航 1.腾讯地图: 2.高德地图: 3.百度地图: 1.腾讯地图: 调用方式: http://apis.map.qq.com/uri/v1/marker?marker=coord:l ...
ArchSummit分享 | 高德地图App架构演化与实践
讲师介绍郝仁杰,高德地图无线开发专家.在7月13日落幕的2019年ArchSummit峰会上就高德地图近几年的App架构演化和实践进行了分享. 背景概述高德是国内领先的数字地图内容.导航和位置服务 ...
高德地图哪个语音包最好_高德地图app怎么录制语音包?高德地图将自己的语音用作导航语音包的方法介绍...
高德地图是一款中国专业的手机地图,拥有全面的地点信息,特色语音导航.智能路线规划,是我们常用的一款移动地图导航工具,用高德地图语音导航,可以听到很多明星的导航语音播报,当然你也可以自己录制语音包.那么 ...
H5页面中调起手机的电话拨打功能
在H5页面中调起手机的电话拨打功能其实很简单就能实现,代码如下: <a href="tel:13555555555">点击给我打电话</a> 但是也存在一些 ...
Android调用高德地图app语音导航
直接调用高德地图app进行导航首先,要先进入高德开放平台,注册登录以后,创建自己的APP,然后会生成appkey 高德开放平台网址: http://lbs.amap.com/ 然后下载jar包导入项 ...

H5页面中调起高德地图app，如果未安装应用，则提示用户安装

一、需求：

3.如果用户未安装高德地图app，需要提示用户安装

总结：
以上就是调起高德地图的代码，欢迎大佬批评指正

H5页面中调起高德地图app，如果未安装应用，则提示用户安装相关推荐

最新文章

热门文章

H5页面中调起高德地图app，如果未安装应用，则提示用户安装

一、需求：

3.如果用户未安装高德地图app，需要提示用户安装

总结： 以上就是调起高德地图的代码，欢迎大佬批评指正

H5页面中调起高德地图app，如果未安装应用，则提示用户安装相关推荐

最新文章

热门文章

总结：
以上就是调起高德地图的代码，欢迎大佬批评指正