<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";} #l-map{height: 220px;width:100%;} #r-result,#r-result table{width:100%;} .nav { width: 100%; height: 2em; line-height: 2em; background: #EDEDED; border: 1px solid #ADADAD;} .nav .nav-inner{ width: 30%; margin-left: 35%;} .nav .nav-sub { float: left; width: 33%;} .nav .nav-sub a { text-decoration: none; } .nav .nav-sub a i { display: inline-block; background: url("http://webmap1.map.bdstatic.com/wolfman/static/common/images/ui3/mo_banner_ba37b5d.png")} .nav .nav-sub a.bus i { background-position: -1px -192px; position: relative; top: 2px; width: 13px; height: 16px;} .nav .nav-sub a.driver i { background-position: -29px -194px; width: 15px; height: 14px;} .nav .nav-sub a.walk i { background-position: -102px -189px; width: 16px; height: 18px;} .nav .nav-sub a.bus.cur i { background-position: -15px -192px; } .nav .nav-sub a.driver.cur i { background-position: -45px -194px; } .nav .nav-sub a.walk.cur i { background-position: -120px -189px;} .hide { display: none;} input { font-family: "micrsoft yahei"; width: 80%; height: 2em; font-size: 1em; line-height: 2em; border: 0px; outline: 0px; padding: .2em 1em; margin: 0em 10%;} .btn-group { width: 100%; border-top: 1px solid #DDD; border-bottom: 2px solid #DDD;} button {width: 32%; text-align: center; border: 0; border-radius: 0; background-color: inherit; height: 44px; line-height: 44px; font-size: 15px;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FbzOyQ4YujPrZsxiQKoB07aB"></script> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script> <title>导航示例</title> </head> <body> <div id="search"> <input type="text" id="start" placeholder="正在定位您的位置..." style="border-bottom: 1px solid #DDD; " /> <input type="text" id="end" value="汽车西站-公交车站" readonly="true" /> <input type="hidden" id="start_point" value=""/> <input type="hidden" id="end_point" value="112.918571,28.214124"/> <input type="hidden" id="start_location" value=""/> <div class="btn-group"> <button id="bus-search">公交</button> <button id="driver-search">驾车</button> <button id="walk-search">步行</button> </div> </div> <div id="showMap" class="hide"> <div class="nav"> <div class="nav-inner"> <div class="nav-sub"><a href="#" class="bus"><i></i></a></div> <div class="nav-sub"><a href="#" class="driver cur"><i></i></a></div> <div class="nav-sub"><a href="#" class="walk"><i></i></a></div> </div> <!-- <a href="javascript:;" id="reLocation">重新导航</a> --> </div> <div id="l-map"></div> <div id="r-result"></div> </div> <script type="text/javascript"> $(function(){ var ep = $("#end_point").val().split(","); var map = new BMap.Map("l-map"); var point = new BMap.Point(ep[0], ep[1]); map.centerAndZoom(point, 16); // 定位对象 var geoc = new BMap.Geocoder(); 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); $("#start_point").val(r.point.lng+','+r.point.lat); setLocation(r.point); showMap(); }else { $("#start").attr("placeholder","请输入您的当前位置") alert('无法定位到您的当前位置，导航失败，请手动输入您的当前位置！'+this.getStatus()); } },{enableHighAccuracy: true}); $(".nav .nav-sub a").click(function(){ $(".nav .nav-sub a").removeClass('cur'); $(this).addClass('cur'); searchRoute(); }) $("#reLocation").click(function(){ reLocation(); }); $("#bus-search,#driver-search,#walk-search").click(function(){ var id = $(this).attr("id"); $(".nav .nav-sub a").removeClass('cur'); if(id == "bus-search"){ $(".nav .nav-sub a.bus").addClass('cur'); }else if(id == "driver-search"){ $(".nav .nav-sub a.driver").addClass('cur'); }else if(id == "walk-search"){ $(".nav .nav-sub a.walk").addClass('cur'); } showMap(); }) function reLocation(){ $("#search").show(); $("#showMap").hide(); map = new BMap.Map("l-map"); } function showMap(){ $("#srarch").hide(); $("#showMap").show(); searchRoute(); } function setLocation(point){ geoc.getLocation(point, function(rs){ var addComp = rs.addressComponents; var result = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber; $("#start").val(result); $("#start_location").val(result); searchRoute(); }); } function searchRoute(s_, e_){ map = new BMap.Map("l-map"); var cur = $(".nav .nav-sub a.cur"); var type = ""; if(cur.hasClass('bus')){ type = "bus"; }else if(cur.hasClass('driver')){ type = "driver"; }else if(cur.hasClass('walk')){ type = "walk"; }else{ type = "driver"; } var s_; var e_; var sl = $("#start_location").val(); var s = $("#start").val(); var sp = $("#start_point").val(); var e = $("#end").val(); var ep = $("#end_point").val(); if(s != sl){// 如果用户修改了地址（与定位的位置不一致）则使用地址搜索 s_ = s; e_ = e; }else if(sp){// 否则使用坐标搜索 var ps = sp.split(","); var pe = ep.split(","); s_ = new BMap.Point(ps[0], ps[1]); e_ = new BMap.Point(pe[0], pe[1]); } if(type == "bus"){ var transit = new BMap.TransitRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}}); transit.search(s_, e_); }else if(type == "driver"){ var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}}); driving.search(s_, e_); }else if(type == "walk"){ var walking = new BMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}}); walking.search(s_, e_); } } }) </script> </body> </html>
=========================================================================================
php端根据经纬度 从百度api获取地址等信息
获取远程文件：//这个函数可以直接返回一个远程url地址中的显示在浏览器中的内容
public function geturlcontent($url) {
$this->layout = false;
if (function_exists('file_get_contents')) {
$file_content = @file_get_contents($url);
} elseif (ini_get('allow_url_fopen') && ($file = @fopen($url, 'rb'))){
$i = 0;
while (!feof($file) && $i++ < 1000) {
$file_content .= strtolower(fread($file, 4096));
}
fclose($file);
} elseif (function_exists('curl_init')) {
$curl_handle = curl_init();
curl_setopt($curl_handle, CURLOPT_URL, $url);
curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT,2);
curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER,1);
curl_setopt($curl_handle, CURLOPT_FAILONERROR,1);
curl_setopt($curl_handle, CURLOPT_USERAGENT, 'Trackback Spam Check'); //引用垃圾邮件检查
$file_content = curl_exec($curl_handle);
curl_close($curl_handle);
} else {
$file_content = '';
}
return $file_content;
}
核心代码
function get_gps_address($lat,$lng,$type) { $url="http://api.map.baidu.com/geocoder/v2/?ak=se0o5ZCif8WBlePtDwnpOmfL&callback=info&location=".$lat.",".$lng."&output=json&pois=0"; $result=geturlcontent($url);//返回的是百度给出的json字符串 $result=substr($result,29);//去除生成json字符串的左边renderReverse&&renderReverse( 让json字符串逐渐规范 $result=substr($result,0,strlen($result)-1); //去除生成json字符串最右边的 ) 让json字符串规范 $obj=json_decode($result);//转换成json格式对象 return $obj->{'result'}->{'addressComponent'}->{$type}; //这里的result addressComponent是百度api返回的json字符串给出的固定字符串，不能修改 }
调用函数时，前两个参数意思很明确，$type用来控制返回地址信息中哪个信息，具体如下：
//国家 country
//省份 province
//城市 city
//地区 district
//街道 street
//街道号码 street_number
比如：
get_gps_address(40.232709033466,116.22945303887,"country") //返回国家
get_gps_address(40.232709033466,116.22945303887,"province") //返回省份
get_gps_address(40.232709033466,116.22945303887,"city") //返回城市
get_gps_address(40.232709033466,116.22945303887,"district") //返回地区
get_gps_address(40.232709033466,116.22945303887,"street") //返回街道
get_gps_address(40.232709033466,116.22945303887,"city") //返回城市
获取的结果如下：
renderReverse&&renderReverse({"status":0,"result":{"location":{"lng":121.42815637297643,"lat":31.2397306184407},"formatted_address":"上海市普陀区曹杨路268号","business":"曹杨,武宁路,曹家渡","addressComponent":{"country":"中国","country_code":0,"province":"上海市","city":"上海市","district":"普陀区","adcode":"310107","street":"曹杨路","street_number":"268号","direction":"附近","distance":"6"},"pois":[{"addr":"普陀区曹杨路272号","cp":" ","direction":"西","distance":"59","name":"曹杨路办公楼","poiType":"房地产","point":{"x":121.42868085088264,"y":31.239634306940503},"tag":"房地产;写字楼","tel":"","uid":"b15972de6900eefd88b98820","zip":"","parent_poi":{"name":"","tag":"","addr":"","point":{"x":0.0,"y":0.0},"direction":"","distance":"","uid":""}},{"addr":"上海市普陀区谈家渡路28号","cp":" ","direction":"西南","distance":"93","name":"盛泉大厦","poiType":"房地产","point":{"x":121.42870780004795,"y":31.240274967381226},"tag":"房地产;写字楼","tel":"","uid":"4ea3f2f1a8e733d4afcb6682","zip":"","parent_poi":{"name":"","tag":"","addr":"","point":{"x":0.0,"y":0.0},"direction":"","distance":"","uid":""}},{"addr":"上海市普陀区曹杨路272-1号","cp":" ","direction":"附近","distance":"30","name":"交运奥迪(曹杨路店)","poiType":"汽车服务","point":{"x":121.42839339311945,"y":31.239618869285374},"tag":"汽车服务;汽车销售","tel":"","uid":"e98a187414026c659cf77989","zip":"","parent_poi":{"name":"","tag":"","addr":"","point":{"x":0.0,"y":0.0},"direction":"","distance":"","uid":""}},{"addr":"普陀区曹杨路188号(曹杨路顺义路)","cp":" ","direction":"西北","distance":"115","name":"招商银行(曹杨路支行)","poiType":"金融","point":{"x":121.42873474921325,"y":31.238985923231348},"tag":"金融;银行","tel":"","uid":"373cf757e018a4134354d7ea","zip":"","parent_poi":{"name":"上钞大厦","tag":"房地产;写字楼","addr":"上海普陀区曹扬路176号","point":{"x":121.42895932559074,"y":31.238877858842835},"direction":"西北","distance":"142","uid":"49a02a7a733569412b201acb"}},{"addr":"上海普陀区曹扬路176号","cp":" ","direction":"西北","distance":"142","name":"上钞大厦","poiType":"房地产","point":{"x":121.42895932559074,"y":31.238877858842835},"tag":"房地产;写字楼","tel":"","uid":"49a02a7a733569412b201acb","zip":"","parent_poi":{"name":"","tag":"","addr":"","point":{"x":0.0,"y":0.0},"direction":"","distance":"","uid":""}},{"addr":"普陀区曹杨路333号4楼(近宁夏路中山公园商业圈)","cp":" ","direction":"东南","distance":"150","name":"君满堂宾馆","poiType":"酒店","point":{"x":121.42723457901158,"y":31.240575999084915},"tag":"酒店;其他","tel":"","uid":"8cba4bb0917f609dad045711","zip":"","parent_poi":{"name":"","tag":"","addr":"","point":{"x":0.0,"y":0.0},"direction":"","distance":"","uid":""}},{"addr":"上海市普陀区西谈家渡路17弄-1-～8号","cp":" ","direction":"南","distance":"111","name":"上海市第十二职业技能鉴定所","poiType":"政府机构","point":{"x":121.42811491841137,"y":31.240591436582073},"tag":"政府机构;公检法机构","tel":"","uid":"f0d8064d82b22e793be4a660","zip":"","parent_poi":{"name":"","tag":"","addr":"","point":{"x":0.0,"y":0.0},"direction":"","distance":"","uid":""}},{"addr":"西谈家渡路81弄1-11号｜西谈家渡路129弄1-6号｜西谈家渡路162-164号｜西谈家渡路21号｜西谈家渡路39弄1-6号","cp":" ","direction":"南","distance":"83","name":"西谈家渡路公房","poiType":"房地产","point":{"x":121.42806102008076,"y":31.240367592624023},"tag":"房地产;住宅区","tel":"","uid":"f16018735dfa51abd22dd6b9","zip":"","parent_poi":{"name":"","tag":"","addr":"","point":{"x":0.0,"y":0.0},"direction":"","distance":"","uid":""}},{"addr":"西谈家渡路18号(曹杨路谈家渡路)","cp":" ","direction":"南","distance":"111","name":"上海沪西大众汽车维修站","poiType":"汽车服务","point":{"x":121.42811491841137,"y":31.240591436582073},"tag":"汽车服务;汽车维修","tel":"","uid":"0dc3d82ddee24f7575e5b647","zip":"","parent_poi":{"name":"","tag":"","addr":"","point":{"x":0.0,"y":0.0},"direction":"","distance":"","uid":""}},{"addr":"曹杨路333号2层","cp":" ","direction":"东南","distance":"150","name":"中国教育","poiType":"教育培训","point":{"x":121.42723457901158,"y":31.240575999084915},"tag":"教育培训;中学","tel":"","uid":"56fc7e36129e3a7fcc06a42c","zip":"","parent_poi":{"name":"","tag":"","addr":"","point":{"x":0.0,"y":0.0},"direction":"","distance":"","uid":""}}],"roads":[],"poiRegions":[],"sematic_description":"曹杨路办公楼西59米","cityCode":289}})