Méthode HTML5 pour appeler l'API Baidu Map pour obtenir l'emplacement actuel et naviguer directement vers la destination-Tutoriel H5-php.cn

Méthode HTML5 pour appeler l'API Baidu Map pour obtenir l'emplacement actuel et naviguer directement vers la destination

小云云

Libérer： 2018-03-03 09:32:32

original

12702 Les gens l'ont consulté

Cet article présente principalement le code d'implémentation des pages HTML5 permettant d'appeler directement l'API Baidu Map pour obtenir l'emplacement actuel et la destination de navigation directe. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Vous pouvez enregistrer une étape en envoyant d'abord les informations de localisation, cliquez sur OK puis quittez la navigation,

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

Copier après la connexion

Recommandations associées :

js appelle l'API de carte Baidu et ajoute des points et des annotations sur les compétences map_javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!