HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
程序员文章站
2024-02-08 16:44:04
这篇文章主要介绍了HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码,需要的朋友可以参考下... 18-03-02...
我是应用在微信中，自定义菜单，菜单直接链接到这个html5页面，获取当前位置后，页面中定好目的地，这样打开页面后直接进入导航页面
可以省下先发送位置信息后，点确定再出导航，省一步，
<!doctype html>
<html lang="zh-cmn-hans">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>html5页面直接调用百度地图api,获取当前位置，直接导航目的地</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wdyecxgrrhezwyc9jpn1tt7fzr2zjosz"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><!--调用jquery-->
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new bmap.map("allmap");
var point = new bmap.point(116.709684,39.89778);
map.centerandzoom(point, 16);
map.enablescrollwheelzoom();
var myicon = new bmap.icon("myicon.png",new bmap.size(30,30),{
anchor: new bmap.size(10,10)
});
var marker=new bmap.marker(point,{icon: myicon});
map.addoverlay(marker);
var geolocation = new bmap.geolocation();
geolocation.getcurrentposition(function(r){
if(this.getstatus() == bmap_status_success){
var mk = new bmap.marker(r.point);
map.addoverlay(mk);
//map.panto(r.point);//地图中心点移到当前位置
var latcurrent = r.point.lat;
var lngcurrent = r.point.lng;
//alert('我的位置：'+ latcurrent + ',' + lngcurrent);
location.href="http://api.map.baidu.com/direction?origin="+latcurrent+","+lngcurrent+"&destination=39.89778,116.709684&mode=driving®ion=北京&output=html";
}
else {
alert('failed'+this.getstatus());
}
},{enablehighaccuracy: true})
map.addoverlay(marker);
var licontent="<b>健龙森羽毛球馆</b><br>";
licontent+="<span><strong>地址：</strong>北京市通州区滨河中路108号</span><br>";
licontent+="<span><strong>电话：</strong>(010)81556565 / 6969</span><br>";
var opts = {
width : 200,
height: 80,
};
var infowindow = new bmap.infowindow(licontent, opts);
marker.openinfowindow(infowindow);
marker.addeventlistener('click',function(){
marker.openinfowindow(infowindow);
});
</script>
总结
以上所述是小编给大家介绍的html5页面直接调用百度地图api获取当前位置直接导航目的地的实现代码，希望对大家有所帮助