核心提示:php百度地图api接入页面html部分页面html部分pre class=brush:sql;!--地址选择--p id=address_select_box style=position: rel...
php百度地图api接入——页面html部分
页面html部分<pre class="brush:sql;"><!--地址选择--> <p id="address_select_box" style="position: relative;background: #fff;"> <p class="map" style="position: fixed;top: 0;left: 0;width: 640px;height: 400px;margin: 0 auto;"> <!--<img src="images/map.jpg"/>--> <p id="allmap" style="width: 640px;height: 400px;overflow: hidden;margin: 0px;font-family:微软雅黑;"></p> <!--新增--> <p class="search"> <form action="" method=""> <input type="text" id="address_text" value="" class="input" placeholder="请输入地址"/> <span class="icon-search"></span> </form> </p> <!--新增--> </p> <p style="height:400px;width:640px;"></p> <p class="map_list"> <ul> <li class="active"> <p> <span class="icon-map-marker"></span>当前位置 </p> <p> 地址:定位中。。。 </p> </li> </ul> </p> </p> <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=key"></script> <script type="text/javascript" src="https://developer.baidu.com/map/jsdemo/demo/convertor.js"></script> <script> // 百度地图API功能 var map = new BMap.Map("allmap"); var point, marker, m_address; $(function(){ navigator.geolocation.getCurrentPosition(translatePoint);//浏览器定位 }); //建立一个自动完成的对象 var ac = new BMap.Autocomplete({ "input" : "address_text", "location" : map }); //鼠标点击下拉列表后的事件 ac.addEventListener("onconfirm", function(e) { var _value = e.item.value; m_address = _value.province + _value.city + _value.district + _value.street + _value.business; setPlace(); }); //获取定位的经纬度 function translatePoint(position){ var dw_lng = position.coords.longitude; var dw_lat = position.coords.latitude; var dw_point = new BMap.Point(dw_lng, dw_lat); BMap.Convertor.translate(dw_point, 0, initMap);//转换坐标 } //根据经纬度获取地址 function setLocation(is_close_box){ var geoc = new BMap.Geocoder(); geoc.getLocation(point, function(rs){ var _value = rs.addressComponents; m_address = _value.province + _value.city + _value.district + _value.street + _value.streetNumber; if (is_close_box==1) { set_address(point.lng, point.lat, m_address); }else { get_near(point.lng, point.lat, m_address); } }); } //初始化地图 function initMap(init_point){ point = init_point; setLocation(0); map.centerAndZoom(point, 18);//地图显示 marker = new BMap.Marker(point);//创建标注 map.addOverlay(marker); map.enableScrollWheelZoom(); //可以鼠标滚动、缩放比例尺 marker.enableDragging(); //可拖拽 //拖曳标注点的位置 marker.addEventListener("dragend", function(e){ point = marker.getPosition();//获取marker的位置 setLocation(1); }); } //检索结果 function setPlace(){ map.clearOverlays();//清除地图上所有覆盖物 function myFun(){ point = local.getResults().getPoi(0).point;//获取第一个智能搜索的结果 setLocation(1); } //智能搜索 var local = new BMap.LocalSearch(map, { onSearchComplete: myFun }); local.search(m_address); } //获取附近的商家信息 function get_near(lng, lat, address){ $.ajax({ type:'post', url:"{:U('User/addressSelect')}", data:{lng:lng, lat:lat, address:address}, dataType:"html", success:function(obj){ $(".map_list").find('ul').html(obj); } }); } function set_address(lng, lat, address) { $("#lng").val(lng); $("#lat").val(lat); $("#address").val(address); } </script> <!--地址选择end--></pre><pre class="brush:sql;"><pre class="brush:sql;">User/addressSelect方法</pre></pre><pre class="brush:sql;">public function addressSelect() { $lng = $_POST['lng']; $lat = $_POST['lat']; $address = $_POST['address']; $this->assign('lng', $lng); $this->assign('lat', $lat); $this->assign('address', $address); $list = get_near($lat, $lng); $this->assign('list', $list); $this->display('index/address_select'); }</pre><pre class="brush:sql;"><pre class="brush:sql;"><pre class="brush:sql;">User/addressSelect视图 </pre></pre></pre><pre class="brush:sql;"><li class="active" data-lng="{$lng}" data-lat="{$lat}" data-address="{$address}"> <p> <span class="icon-map-marker"></span>当前位置 </p> <p> 地址:{$address} </p> </li> <foreach name="list" item="item"> <li data-lng="{$item.info.location.lng}" data-lat="{$item.info.location.lat}" data-address="{$item.info.address}"> <p> <span class="icon-map-marker"></span>{$item.info.name} </p> <p> 地址:{$item.info.address} </p> </li> </foreach> <script> $(function(){ $(".map_list ul>li").bind('click', function(){ var lng = $(this).attr('data-lng'); var lat = $(this).attr('data-lat'); var address = $(this).attr('data-address'); set_address(lng, lat, address); }); }); </script></pre><pre class="brush:sql;"><pre class="brush:sql;"><pre class="brush:sql;"><pre class="brush:sql;">//计算经纬度距离</pre></pre></pre></pre><br>function get_distance($lat1, $lng1, $lat2, $lng2){ <br>//deg2rad()函数将角度转换为弧度 <br>$radLat1 = deg2rad($lat1); <br>$radLat2 = deg2rad($lat2); <br>$radLng1 = deg2rad($lng1); <br>$radLng2 = deg2rad($lng2); <br>$a = $radLat1-$radLat2; <br>$b = $radLng1-$radLng2; <br>$s = 2*asin(sqrt(pow(sin($a/2),2)+cos($radLat1)*cos($radLat2)*pow(sin($b/2),2)))*6378.137*1000; <br>return $s;<br>}<br>//根据经纬度检索附近商家信息<br>function get_near($lat, $lng){ <br>$url = 'https://api.map.baidu.com/place/v2/search?query=小区$公司&location='.$lat.','.$lng.'&radius=1000&output=json&ak=7NpVlxZOSqNn1CYT4hmvC8VP&page_size=15'; <br>$res = file_get_contents($url); <br>$arr = ((array)json_decode($res, true)); <br>$list = $arr['results']; <br>$distance_arr = array(); <br>foreach ($list as $k=>$v) <br>{ <br>$distance = get_distance($lat, $lng, $v['location']['lat'], $v['location']['lng']); <br>$list[$k]['distance'] = $distance; <br>$distance_arr[$k] = $distance; <br>}<br>//根据距离由近及远降序<br>array_multisort($distance_arr, SORT_ASC, $list); <br>return $list;<br>}<br><br>效果图如下:<br><img width="640px" src="/uploadfile/Collfiles/20170322/20170322095454340.jpg" alt="" style="height: 560px; width: 315px;"><br>