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>
