6g下载网
当前位置: 主页 > 软件教程 > 计算机软件 >

百度地图API使用技巧

时间: 2017-05-18 21:40 来源: 6g下载网

分享到:

现在越来越多的开发人员使用百度地图API,下面小编给大家介绍百度地图API使用技巧,帮助开发人员做到事半功倍的效果。

首先,引入百度api密钥

  1. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=***你的密钥***"></script> 

定义地图区域技巧:

  1. <div id="l-map"></div>   
  2. <script type="text/javascript" >  
  3. // 百度地图API功能  
  4.     function myFun(result){  
  5.     map.centerAndZoom(new BMap.Point(ypoint,xpoint),18); //数据库记录的经纬度   
  6. }  
  7.             var myCity = new BMap.LocalCity();  
  8.             myCity.get(myFun);  
  9.             function G(id) {  
  10.                 return document.getElementById(id);  
  11.             }  
  12.             var map = new BMap.Map("l-map");  
  13.  
  14.             var ac = new BMap.Autocomplete(    //建立一个自动完成的对象  
  15.                 {"input" : "search_city" 
  16.                     ,"location" : map});  
  17.             ac.addEventListener("onhighlight"function(e){  //     鼠标放在下拉列表上的事件  
  18.                     var str = "";  
  19.                     var _value = e.fromitem.value;  
  20.                     var value = "";  
  21.                     if (e.fromitem.index > -1) {  
  22.                         value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;  
  23.                 }      
  24.             str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;  
  25.  
  26.             value = "";  
  27.             if (e.toitem.index > -1) {  
  28.                 _value = e.toitem.value;  
  29.                 value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;  
  30.             }      
  31.             str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;  
  32.             G("searchResultPanel").innerHTML = str;  
  33.             });  
  34.  
  35.             var myValue;  
  36.             ac.addEventListener("onconfirm"function(e) {  
  37.                 //鼠标点击下拉列表后的事件  
  38.                 var _value = e.item.value;  
  39.                 myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;  
  40.                 G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;  
  41.                     setPlace();  
  42.             });    
  43.     function setPlace(){   
  44.         function myFun(){  
  45.         var pp = local.getResults().getPoi(0);    //获取第一个智能搜索的结果    
  46.         // get_address(pp.point.lat,pp.point.lng,pp.title,pp.point);  
  47.         //此处处理点击下拉列表事件  
  48.         }  
  49.     var local = new BMap.LocalSearch(map, { //智能搜索  
  50.     onSearchComplete: myFun  
  51.     });  
  52.     local.search(myValue);  
  53.     }  
  54. </script> 

获取省市县街道等信息技巧:

通过坐标获取省市县街道等信息,注意:此处的坐标一定要是百度地图中实例化的对象;

  1. var point = new BMap.Point(lng,lat);  
  2. var geoc = new BMap.Geocoder();  
  3.     geoc.getLocation(point, function(rs){  
  4.         var _value = rs.addressComponents;  
  5.         var province = _value.province;  
  6.         var city = _value.city;  
  7.         var county = _value.district;  
  8.         var street = _value.street + _value.streetNumber;  
  9.         alert(province +city +county );  
  10. }); 

获取经纬度技巧:

通过城市名称获取经纬度;当百度api链接引入之后,可在JS中直接使用;

  1. var geoc = new BMap.Geocoder();  
  2. geoc.getPoint(city_name, function(rs){  
  3.     // alert(rs.lng);   
  4.     baidu(rs.lng,rs.lat)  
  5.  
  6. }); 

此处是在PHP代码中通过访问百度API接口通过城市名称获取经纬度;

  1. //JS代码  
  2. $.post("{:U('')}",{city:city_name},function(data){   
  3.     var obj = JSON.parse(data);  
  4.     baidu(obj.lng,obj.lat)   
  5.     // window.location.href = ''   
  6. })  
  7. //PHP代码  
  8. $data = file_get_contents("http://api.map.baidu.com/geocoder?output=json&key=****你的密钥****&address=".$_POST['city']);  
  9. $arr = json_decode($data,true);  
  10. $new = json_encode($arr['result']['location']);  
  11. print_r($new);  

申请定位操作技巧:

百度地图申请定位操作,此处只展示定位成功操作

  1. var geolocation = new BMap.Geolocation();  
  2.         geolocation.getCurrentPosition(function(r){   
  3.             var lng=r.point.lng;  
  4.             var lat=r.point.lat;   
  5.             if(this.getStatus() == BMAP_STATUS_SUCCESS){   
  6.                 var myGeo = new BMap.Geocoder();        
  7.                 // 根据坐标得到地址描述      
  8.                 myGeo.getLocation(new BMap.Point(lng,lat), function(result){    
  9.                   var _value = result.addressComponents;  
  10.                   var province = _value.province;  
  11.                   var city = _value.city;  
  12.                   var county = _value.district;  
  13.                   var street = _value.street + _value.streetNumber;  
  14.                 // alert(province+city+county+street)  
  15.                 $.post("{:U('')}",{lat:lat,lng:lng,province:province,city:city,county:county,street:street,now_city:''},function(data){   
  16.                     if(data=='ok'){  
  17.                         window.location.href = "{:U('')}"   
  18.                         }else{  
  19.                         alert(data)  
  20.                         }  
  21.                     });  
  22.         });  
  23.     }  
  24.     else {  
  25.     alert('failed'+this.getStatus());  
  26.     }          
  27. },{enableHighAccuracy: true}) //用于精准定位 

用户拒绝定位技巧:

  1. var geolocation = new BMap.Geolocation();  
  2.     geolocation.getCurrentPosition(function(r){  
  3.     if(r.accuracy==null){    
  4.             // alert('您的位置:'+r.point.lng+','+r.point.lat);  
  5.             // return false  
  6.             // alert('accuracy null:'+r.accuracy);    
  7.             // alert('您已拒绝定位,无法继续访问!');    
  8.             //用户决绝地理位置授权    
  9.             $.ajax({  
  10.                 url:'/',  
  11.                 type:'POST',  
  12.                 data:{type:'all',lat:lats,lng:lngs},   
  13.                 async:false,  
  14.                 success:function(data){  
  15.                     if(data=="ok"){  
  16.                     window.location.href='{$self}' 
  17.                     }  
  18.                     if(data=="error"){  
  19.                         $.post('');  
  20.                         alert("定位失败,请清理缓存后重新定位!");  
  21.                     }  
  22.                 }  
  23.             })  
  24.             return;    
  25.         }    
  26. },{enableHighAccuracy: true}) 

百度地图API使用技巧给大家介绍完毕,感谢阅读!

(责任编辑:大卫)
标签:百度地图 API

分享到:

------分隔线----------------------------