zoukankan      html  css  js  c++  java
  • HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地(转)

    HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地 
    我是应用在微信中,自定义菜单,菜单直接链接到这个HTML5页面,获取当前位置后,页面中定好目的地,这样打开页面后直接进入导航页面 
    可以省下先发送位置信息后,点确定再出导航,省一步,

    <!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 { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}  
        </style>   
      
    </head>  
      
    <body>    
       <div id="allmap"></div>  
    </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>  
    

      

  • 相关阅读:
    【转载】JS中bind方法与函数柯里化
    计算机中位(bit), 字节(byte), 字(word)的关系
    MySQL 正则(Regular Expression) 邮箱(Email)
    eclipse remote system explorer operation
    Hibernate save, saveOrUpdate, persist, merge, update 区别
    产品经理 写SQL
    DevOps Scrum Agile Tech Debt
    SpringMVC 集成 jackson,日志格式报错:org.codehaus.jackson.map.JsonMappingException: Can not construct instance of java.util.Date from String value
    EDAS Serverless & Kubernetes SLB LVS Nginx
    阿里巴巴 开发者 工具 开源 社区
  • 原文地址:https://www.cnblogs.com/ghfjj/p/6866393.html
Copyright © 2011-2022 走看看