Home > Article > Web Front-end > HTML5 method to call Baidu Map API to obtain the current location and directly navigate to the destination

HTML5 method to call Baidu Map API to obtain the current location and directly navigate to the destination

小云云Original: 2018-03-03 09:32:3212624browse

This article mainly introduces the implementation code of HTML5 page to directly call Baidu Map API to obtain the current location and direct navigation destination. Friends who need it can refer to it. I hope it can help everyone.

You can save the need to send the location information first, click OK and then exit the navigation, saving one step,

<!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.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(&#39;我的位置：&#39;+ latCurrent + &#39;,&#39; + lngCurrent);
            location.href="http://api.map.baidu.com/direction?origin="+latCurrent+","+lngCurrent+"&destination=39.89778,116.709684&mode=driving&region=北京&output=html";
        }
        else {
            alert(&#39;failed&#39;+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(&#39;click&#39;,function(){
        marker.openInfoWindow(infoWindow);
    });  
</script>

Related recommendations:

js Call Baidu map api and add points and annotations on the map_javascript skills

The above is the detailed content of HTML5 method to call Baidu Map API to obtain the current location and directly navigate to the destination. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 method to implement mobile page adaptation to mobile phone screenNext article：HTML5 method to implement mobile page adaptation to mobile phone screen

See more

HTML5 method to call Baidu Map API to obtain the current location and directly navigate to the destination

Related articles