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>  
    

      

  • 相关阅读:
    27 Spring Cloud Feign整合Hystrix实现容错处理
    26 Spring Cloud使用Hystrix实现容错处理
    25 Spring Cloud Hystrix缓存与合并请求
    24 Spring Cloud Hystrix资源隔离策略(线程、信号量)
    23 Spring Cloud Hystrix(熔断器)介绍及使用
    22 Spring Cloud Feign的自定义配置及使用
    21 Spring Cloud使用Feign调用服务接口
    20 Spring Cloud Ribbon配置详解
    19 Spring Cloud Ribbon自定义负载均衡策略
    18 Spring Cloud Ribbon负载均衡策略介绍
  • 原文地址:https://www.cnblogs.com/ghfjj/p/6866393.html
Copyright © 2011-2022 走看看