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

电玩女神 2023-02-18 03:21 12阅读 0赞

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

**[web前端全栈资料粉丝福利（面试题、视频、资料笔记、进阶路线）][web]**

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

<!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>
     <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.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&region=北京&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>

[web]: https://blog.csdn.net/lin123_00/article/details/105777795