这几天在研究app分享页的定位怎样能拉起百度地图去进行路径规划,不拉起来也行,打开百度地图网页版事情也能解决,在网上找了一通,功夫不负有心人,找到了这个方法。
对此进行了一些优化。

本文示例,在H5中调用百度地图的js api,根据经纬度显示地图,同时可点击打开百度地图的APP,将当前定位传到APP中,实现路径规划。注意安卓和苹果的,调起APP的时候协议是不同的。

被拉起页面的跳转链接
后面把目的地位置坐标带上

1
xxx.com/baiduMap.html?108.2555555555_34.25656565565

被拉起页面的代码
获取108.2555555555_34.25656565565的方法这里就不写了,或取URL参数的方式网上搜一下就行,获取后覆盖下面代码里面的x、y坐标就行。

baiduMap.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<head>
<title>示例</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
<style type="text/css">
#allmap
{
position:absolute;
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script type="text/javascript">

var scheme = "";
$(function () {
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.331398, 39.897445), 11); //经纬度
map.enableScrollWheelZoom(true);

map.clearOverlays();
var new_point = new BMap.Point(Number('@ViewBag.Longitude'), Number('@ViewBag.Latitude'));
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
map.setZoom(18);
map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT, offset: { height: 30, width: 5 } }));// 左下角,添加比例尺

var cr = new BMap.CopyrightControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, offset: { height: 30, width: 5 } }); //设置版权控件位置
map.addControl(cr); //添加版权控件
cr.addCopyright({ id: 1, content: "<a onclick='OpenApp()' href='#' style='font-size: 16px;background: #ebedf0;border: solid 1px #606366;border-radius: 4px;padding: 2px;color: #606366;text-decoration: none;'>打开百度地图</a>" });
});

function OpenApp() {
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
if (r.point.lat != "" && r.point.lng != "") {
scheme = "://map/direction?origin=latlng:" + r.point.lat + "," + r.point.lng + "|name:我的位置&destination=latlng:@ViewBag.Latitude,@ViewBag.Longitude|name:@ViewBag.Address&mode=driving";

var I = navigator.userAgent;
var isiPad = (I.match(/(iPad).*OS\s([\d_]+)/)) ? true : false;
var isAndroid = I.match(/android/i) ? true : false;
var isMac = (I.match(/(Mac\sOS)\sX\s([\d_]+)/)) ? true : false;
var isiPhone = (!isiPad && I.match(/(iPhone\sOS)\s([\d_]+)/)) ? true : false;
var isSafari = (isiPhone || isiPad) && I.match(/Safari/);
var isMQQBrowser = I.match(/MQQBrowser\/([\d\.]+)/) ? true : false;
var isUCBrowser = I.match(/UCBrowser\/([\d\.]+)/) ? true : false;
var isQQ = (!isMQQBrowser) ? (I.match(/QQ\/([\d\.]+)/) ? true : false) : false;
var safariVersion = 0;
isSafari && (safariVersion = I.match(/Version\/([\d\.]+)/));
try { safariVersion = parseFloat(safariVersion[1], 10) } catch (R) { }
var isSAMSUNG = I.toUpperCase().indexOf("SAMSUNG-SM-N7508V") != -1;
// 尝试打开手机APP
if ((isSafari && safariVersion >= 9) || isMac || isSAMSUNG || isUCBrowser || isMQQBrowser || isQQ || isiPhone) {
tryIOpen(scheme);
} else {
tryAOpen(scheme);
}

} else {
alert("无法获取当前位置!");
}
}
else {
alert("无法获取当前位置!");
console('无法获取当前位置' + this.getStatus());
}
}, { enableHighAccuracy: true, timeout: 1000 });
}

function tryAOpen(scheme) {
var protocol = "bdapp";
var iframe = document.createElement("iframe");
iframe.Id = "i" + Math.random().toString().replace(".", "");
iframe.src = protocol+scheme;
iframe.style.display = "none";
document.body.appendChild(iframe);
setTimeout(function () {
document.body.removeChild(iframe);
}, 500)
}

function tryIOpen(scheme) {
var protocol = "baidumap";
var a = document.createElement("a");
a.id = "a" + Math.random().toString().replace(".", "");
a.href = protocol + scheme ;
document.body.appendChild(a);
var T = document.createEvent("HTMLEvents");
T.initEvent("click", !1, !1),
a.dispatchEvent(T)
}
</script>
</head>

<div id="allmap"> </div>