最近做项目的时候用到百度地图,在这里分享一下
test.html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.2/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.2/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="wrapper" style="width: 500px;height: 500px;margin: auto;background-color: #E6E8EA;">
<div style="height: 30px;">当前位置:<span id="current_location"></span></div>
<div>
<input name="order_site" class="easyui-textbox" id="order_site" value="" required/>
<a href="javascript: void(0);" οnclick="orderSite()">查询</a>
<div id="searchResultPanel" style=""></div>
<div id="detailed_addr"></div>
<!-- 经度 -->
<input type="text" name="point_lng" id="point_lng">
<!-- 纬度 -->
<input type="text" name="point_lat" id="point_lat">
</div>
</div>
<!-- 地图 -->
<div style="width:0;height:0;" id="allmap"></div>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hRSacxw4qF1QCkl8jIliBnry"></script>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
test.js部分
var map = new BMap.Map("allmap");
map.centerAndZoom("北京",12);
$(document).ready(function(){
hideSRP();
currentLocation();
});
var addrArray = [];//检索地址
var addrTitle;//简称
var addrPointLng;//经度
var addrPointLat;//纬度
var detailedAddr;//详细地址
function orderSite(){
var kyword = $("#order_site").textbox("getValue");
var inner = [];
var local = new BMap.LocalSearch(
map,
{
renderOptions: {map: map, panel: "searchResultPanel"},
pageCapacity: 5,
onResultsHtmlSet:function(){
$("#searchResultPanel").css({
"display":"block"
});
var a = local.getResults();
/*var addr = a.or.length;
alert(addr);*/
for(var i=0; i<a.ur.length; i++){
addrArray.push(a.ur[i]);
}
$("#searchResultPanel li").click(function(e){
var index = $(this).index();
// alert(index);
addrTitle = a.ur[index].title;
addrPointLng = a.ur[index].point.lng;
addrPointLat = a.ur[index].point.lat;
detailedAddr = a.ur[index].address;
$("#order_site").textbox("setValue",detailedAddr);
$("#point_lng").val(addrPointLng);
$("#point_lat").val(addrPointLat);
$("#detailed_addr").text(detailedAddr);
$("#searchResultPanel").css({
"display":"none"
});
});
},
}
);
local.search(kyword);
}
//隐藏列表
function hideSRP(){
$(document).bind("click",function(e){
var target = $(e.target);
if(target.closest("#searchResultPanel").length == 0){
$("#searchResultPanel").css({
"display":"none"
});
}
})
}
/*
* 获取当前位置
*/
function currentLocation(){
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var lng = r.point.lng;
var lat = r.point.lat;
var point = new BMap.Point(lng, lat);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
map.centerAndZoom(point, 15);
map.addControl(new BMap.NavigationControl());
$.ajax({
url:'http://api.map.baidu.com/geocoder/v2/?ak=hRSacxw4qF1QCkl8jIliBnry&callback=renderReverse&location='+lat+","+lng+'&output=json&pois=1',
type: "get",
dataType: 'jsonp',
jsonp : "callback",
success:function(data){
if(data.status==0){
var re = data.result;
var lo = re.formatted_address;
// alert(lo+"附近");
var cl = re.pois[0].addr;
$("#current_location").text(re.pois[0].addr);
};
}
});
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
}