zoukankan      html  css  js  c++  java
  • 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> 
    //$ak=2051409c59b8d558c7e6bbd0c5c62ffd
     
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><!--调用jQuery-->
      <style type="text/css">
            body, html,#allmap { 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>
  • 相关阅读:
    判断质数
    猜拳三局两胜
    输入年月日判断是这一年的哪一天
    switch case
    猜拳
    判断年月日是否正确
    老狼老狼几点了
    判断是否中奖
    平滑部署war包到tomcat-deploy.sh
    只用120行Java代码写一个自己的区块链-3挖矿算法
  • 原文地址:https://www.cnblogs.com/yszr/p/9267932.html
Copyright © 2011-2022 走看看