HTML5调用百度地图API获取当前位置并直接导航目的地的方法

来源：动视网责编：小采时间：2020-11-27 15:06:28

HTML5调用百度地图API获取当前位置并直接导航目的地的方法

HTML5调用百度地图API获取当前位置并直接导航目的地的方法:本文主要和大家介绍了HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码,需要的朋友可以参考下，希望能帮助到大家。可以省下先发送位置信息后，点确定再出导航，省一步，<!DOCTYPE html> <html lang="zh-c

推荐度：

点击下载本文 文档为doc格式

导读HTML5调用百度地图API获取当前位置并直接导航目的地的方法:本文主要和大家介绍了HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码,需要的朋友可以参考下，希望能帮助到大家。可以省下先发送位置信息后，点确定再出导航，省一步，<!DOCTYPE html> <html lang="zh-c

本文主要和大家介绍了HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码,需要的朋友可以参考下，希望能帮助到大家。

可以省下先发送位置信息后，点确定再出导航，省一步，

<!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> 
 <p id="allmap"></p>
</body> 
</html> 
<script type="text/javascript"> 
 var map = new BMap.Map("allmap"); 
 var point = new BMap.Point(116.709684,39.778);
 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.778,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获取当前位置并直接导航目的地的方法

推荐度：

点击下载本文 文档为doc格式

标签： html5 html 获取当前位置

热门焦点

HTML5调用百度地图API获取当前位置并直接导航目的地的方法

HTML5调用百度地图API获取当前位置并直接导航目的地的方法

HTML5调用百度地图API获取当前位置并直接导航目的地的方法

最新推荐

猜你喜欢

热门推荐