HTML5-Methode zum Aufrufen der Baidu Map API, um den aktuellen Standort abzurufen und direkt zum Ziel zu navigieren-H5-Tutorial-php.cn

HTML5-Methode zum Aufrufen der Baidu Map API, um den aktuellen Standort abzurufen und direkt zum Ziel zu navigieren

小云云

Freigeben： 2018-03-03 09:32:32

Original

12614 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Implementierungscode für HTML5-Seiten vorgestellt, um die Baidu-Karten-API direkt aufzurufen, um den aktuellen Standort und das direkte Navigationsziel zu erhalten. Ich hoffe, dass er allen helfen kann.

Sie können einen Schritt sparen, indem Sie zuerst die Standortinformationen senden, auf OK klicken und dann die Navigation verlassen,

<!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>

Nach dem Login kopieren

Verwandte Empfehlungen:

js ruft die Baidu-Karten-API auf und fügt der Karte Punkte und Anmerkungen hinzu_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonHTML5-Methode zum Aufrufen der Baidu Map API, um den aktuellen Standort abzurufen und direkt zum Ziel zu navigieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!