概述
本文分享在H5中唤起手机中的高德地图或百度地图APP，并传入起始位置规划路径。
效果
image.png
实现
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="lib/mapbox-gl.css" type="text/css">
<style>
html,
body,
#map {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.tool {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 9;
}
#location {
position: absolute;
bottom: 1rem;
left: 1rem;
z-index: 9;
padding: 0.3rem 1rem;
background-color: white;
width: calc(100% - 4rem);
text-align: center;
border-radius: 0.3rem;
}
</style>
</head>
<body>
<div id="map" class="map">
<div id="location"></div>
<div class="tool">
<button id="amap">高德</button>
<button id="bdmap">百度</button>
</div>
</div>
<script src="lib/mapbox-gl.js"></script>
<script>
const map = new mapboxgl.Map({
container: "map",
center: [114.06705183665042, 22.65447650819611],
zoom: 3,
});
let center = [];
function showPosition(position) {
const { latitude, longitude } = position.coords;
document.getElementById("location").innerHTML =
"Latitude: " + latitude + ", Longitude: " + longitude;
map.flyTo({
center: [longitude, latitude],
zoom: 15,
});
center = [longitude, latitude];
new mapboxgl.Marker({
color: '#ff0000',
}).setLngLat([longitude, latitude]).addTo(map);
}
function getMapScheme(from, to, mapType = "gaode") {
const u = navigator.userAgent;
const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
const andriodBaidu = (to) => {
return `bdapp://map/direction?destination=name:${to.name}|latlng:${to.latitude},${to.longitude}&coord_type=gcj02&mode=driving&src=andr.jianghu.jianhao`;
};
const iOSBaidu = (to) => {
return `baidumap://map/direction?destination=name:${to.name}|latlng:${to.latitude},${to.longitude}&coord_type=gcj02&mode=driving&src=ios.jianghu.jianhao`;
};
const andriodGaode = (to) => {
return `amapuri://route/plan/?sourceApplication=mhc&dlat=${to.latitude}&dlon=${to.longitude}&dname=${to.name}&dev=0&t=0`;
};
const iOSGaode = (to) => {
return `iosamap://path?sourceApplication=mhc&dlat=${to.latitude}&dlon=${to.longitude}&dname=${to.name}&dev=0&t=0`;
};
if (mapType == "baidu") {
if (isAndroid) {
return andriodBaidu(to);
} else {
return iOSBaidu(to);
}
} else if (mapType == "gaode") {
if (isAndroid) {
return andriodGaode(to);
} else {
return iOSGaode(to);
}
}
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
document.getElementById("location").innerHTML =
"User denied the request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE:
document.getElementById("location").innerHTML =
"Location information is unavailable.";
break;
case error.TIMEOUT:
document.getElementById("location").innerHTML =
"The request to get user location timed out.";
break;
case error.UNKNOWN_ERROR:
document.getElementById("location").innerHTML =
"An unknown error occurred.";
break;
}
}
map.on("load", () => {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
document.getElementById("location").innerHTML =
"Geolocation is not supported by this browser.";
}
const from = { name: '我的位置', longitude: center[0], latitude: center[1] }; // 出发地，不传则默认当前位置
const to = { name: '宝安体育馆', longitude: 113.87486718701842, latitude:22.562459090345357 }; // address：目的地
const gdUrl = getMapScheme(from, to, "gaode")
const bdUrl = getMapScheme(from, to, "baidu")
document.getElementById("location").innerHTML =
`${gdUrl}<br>${bdUrl}`;
document.getElementById("amap").setAttribute('href', gdUrl)
document.getElementById("bdmap").setAttribute('href', bdUrl)
});
</script>
</body>
</html>
注意：不能微信中打开，在手机自带的浏览器或安装的其他浏览器中才可以打开。
网友评论