<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地图</title>
</head>
<body>
<div>
当前位置:<text id="myad"></text><br />
<text>目的地:成都天府广场</text><br />
<label for="map-select">选择导航</label>
<select name="map" id="map-select" onchange="check()">
<option value="tx">腾讯地图</option>
<option value="bd">百度地图</option>
<option value="gd">高德地图</option>
</select>
</div>
<script>
var myad = document.getElementById('myad');
var flongitude = ''
var flatitude = ''
myad.innerHTML = "未知"
// 目的地
var tlongitude = 104.065837
var tlatitude = 30.657349
var name = '成都天府广场'
getLocation().then(res => {
// 当前位置
flongitude = res[0]
flatitude = res[1]
myad.innerHTML = flongitude + ',' + flatitude
}).catch(err => {
console.log(err)
})
function check() {
var map = document.getElementById('map-select').value;
goMap(map)
}
function goMap(map) {
console.log(flongitude + ',' + flatitude + ';' + tlongitude + ',' + tlatitude + ',' + name)
var urlCollect = {};
const TMAP_KEY = 'XXX';//自己到腾讯地图开发平台申请key,https://lbs.qq.com/dev/console/application/mine
if (map == "tx") {//腾讯地图
if (flongitude && flatitude) {
urlCollect.Android = `qqmap://map/routeplan?type=drive&from=我的位置&fromcoord=${flatitude},${flongitude}&to=${name}&tocoord=${tlatitude},${tlongitude}&referer=${TMAP_KEY}`;//安卓和IOS
urlCollect.H5 = `https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=我的位置&fromcoord=${flatitude},${flongitude}&to=${name}&tocoord=${tlatitude},${tlongitude}&policy=1&referer=${TMAP_KEY}`;
} else {
urlCollect.Android = `qqmap://map/marker?marker=coord:${tlatitude},${tlongitude};title:${name};addr:${name}&referer=${TMAP_KEY}`;
urlCollect.H5 = `https://apis.map.qq.com/uri/v1/marker?marker=coord:${tlatitude},${tlongitude};title:${name};addr:${name}&referer=${TMAP_KEY}`;
}
} else if (map == "bd") {//百度地图
if (flongitude && flatitude) {
const uri = `direction?origin=${flatitude},${flongitude}|name:我的位置&destination=${tlatitude},${tlongitude}|name:${name}&mode=driving®ion=${name}`;
urlCollect.H5 = `http://api.map.baidu.com/${uri}&output=html`
urlCollect.Android = `bdapp://map/${uri}&src=andr.baidu.openAPIdemo`;
urlCollect.IOS = `baidumap://map/${uri}&src=ios.baidu.openAPIdemo`;
} else {
const uri = `marker?location=${tlatitude},${tlongitude}&title=${name}&content=${name}`;
urlCollect.H5 = `https://api.map.baidu.com/${uri}&output=html&src=webapp.baidu.openAPIdemo`;
urlCollect.Android = `bdapp://map/${uri}&src=andr.baidu.openAPIdemo`;
urlCollect.IOS = `baidumap://map/${uri}&src=ios.baidu.openAPIdemo`;
}
} else {//高德地图
if (flongitude && flatitude) {
urlCollect.H5 = `https://uri.amap.com/navigation?from=${flongitude},${flatitude},我的位置&to=${tlongitude},${tlatitude},${name}&mode=driving&policy=1&src=mypage&coordinate=gaode&callnative=1`;
urlCollect.Android = `amapuri://route/plan/?sid=BGVIS1&slat=${flatitude}&slon=${flongitude}&sname=当前位置&did=BGVID1&dlat=${tlatitude}&dlon=${tlongitude}&dname=${name}&dev=0&t=0`
urlCollect.IOS = `iosamap://path?sourceApplication=applicationName&sid=BGVIS1&slat=${flatitude}&slon=${flongitude}&sname=当前位置&did=BGVID1&dlat=${tlatitude}&dlon=${tlongitude}&dname=${name}&dev=0&t=0`
} else {
urlCollect.H5 = `https://uri.amap.com/marker?position=${tlongitude},${tlatitude}&name=${name}&src=mypage&coordinate=gaode&callnative=1`;
urlCollect.Android = `amapuri://route/plan/?sourceApplication=mhc&dlat=${tlatitude}&dlon=${tlongitude}&dname=${name}&dev=0&t=0`//导航
// urlCollect.Android = `androidamap://navi?sourceApplication=appname&poiname=${name}&lat=${tlatitude}&lon=${tlongitude}&dev=1&style=2`//驾车导航
urlCollect.IOS = `iosamap://path?sourceApplication=mhc&dlat=${tlatitude}&dlon=${tlongitude}&dname=${name}&dev=0&t=0`
}
}
var url = ""
if (typeof plus === "undefined") {
url = urlCollect.H5;
window.open(url, "_blank");
return;
} else if (plus.os.name == "Android") {
url = urlCollect.Android;
} else {
url = map == "腾讯地图" ? urlCollect.Android : urlCollect.IOS;
}
if (url != "") {
url = encodeURI(url);
plus.runtime.openURL(url, function (e) {
if (e.code == 0) {
// 打开地图应用成功
console.log("成功打开地图应用");
} else {
// 打开地图应用失败,提示未安装应用
plus.nativeUI.alert("本机未安装指定的地图应用");
}
});
}
}
function getLocation() {
return new Promise((resolve, reject) => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
var cords = position.coords;
var longitude = cords.longitude; //获取经度
var latitude = cords.latitude; //获取纬度
console.log(longitude, latitude)
resolve([longitude, latitude])
}, (err) => {
msg = error(err)
reject(msg)
});
} else {
alert("该浏览器不支持获取地理位置");
}
})
}
function error(error) {
var err = error.code;
var msg = "";
switch (err) {
case 1: msg = "用户拒绝了位置服务"; break;
case 2: msg = "获取不到位置信息"; break;
case 3: msg = "获取信息超时"; break;
default: msg = "其他错误";
}
alert(msg);
return msg;
}
</script>
</body>
</html>
Javascript——外部调用(腾讯、百度、高德)地图导航,自动判断是web端还是手机端,最全接口合集!!!
于 2024-03-14 16:35:35 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)