首先需要百度账号开通百度开发者,并在百度地图开放平台创建应用并申请应用密钥。
我们要做一个地点定位,最重要的就是获取该地点的经纬度,通过经纬度去定位该地点在地图中的位置。首先从添加地点开始说起,也就是你创建一个地标建筑并输入其位置保存的时候,这个时候就应该获取这个建筑的经纬度并保存在你的数据库中,方便后面地图定位页面读取,因为创建地址解析器并调用解析方法后,解析出的经纬度数据的作用域仅在这个解析方法之内,我尝试过很多其他的方法,都不能在方法外部获得经纬度数据,所以在创建地标建筑时就应该解析经纬度并保存。当然要保证输入的地点在地图上找得到,因为百度地图并不能定位到其他行星上。
使用百度地图之前我们要引用百度地图api,如下:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hLuhryqxXyhMVEeHCSmVwjnG8TBrWm"></script>
“http://api.map.baidu.com/api?v=2.0&ak=”后面就是你申请的密钥,不要复制我的密钥,因为根本没用。
下面是创建一个建筑并保存的例子:
//保存数据
function saveData(){
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 解析输入的地址的经纬度并封装成参数保存
myGeo.getPoint($("#s_address").val(), function(point){
if (point) {
var dd = {
"layerIdx":$("#layer_idx").val(),
"layerName":$("#layer_name").val(),
"layerType":'a',
"projectIdx":0,
"elecLevel":$("#elec_level").val(),
"installedCapacity":$("#installed_capacity").val(),
"applyCapacity":$("#apply_capacity").val(),
"sAddress":$("#s_address").val(),//地址
"lng":point.lng,//经度
"lat":point.lat,//纬度
"memo":$("#memo").val()
};
layer.confirm('您确定要保存数据吗?', {
btn: ['确定', '取消']
}, function(index) {
layer.close(index);
$.ajax({
type: 'POST',
url: "/StationSetting/saveStationInfo",
data: dd,
success: function(result) {
if (result["result"] == "success") {
layer.alert('保存成功', {
icon: 1
});
}
$('#exampleModal').modal('hide');
clearBox();
loadData();
},
error: function(a) {
layer.alert('保存失败', {
icon: 2
});
},
dataType: 'json'
});
});
}
});
}
以上方法是解析到经纬度数据后封装成参数,通过ajax方法进行数据传递保存。
下面来做地图定位页面,首先引用百度地图api,同上面一样,然后给地图一个初始化容器:
<div id="map">
</div>
之后在js页面进行页面设置:
jQuery(document).ready(function($) {
//初始化地图对象
var map = new BMap.Map("map");//百度地图对象,需申请百度地图秘钥
var myIcon = new BMap.Icon("/image/map.png",new BMap.Size(50,50));//设置标记图样
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); //设置中心点
initAllStationInfo(map,myIcon);
});
//获取所有建筑信息
function initAllStationInfo(map,myIcon){
$.ajax({
type: 'POST',
url: '/StationSetting/queryAllStationInfo',
success: function(result) {
if(result != null && result.length != 0){
generateMapData(result,map,myIcon);
}else{
return;
}
},
error: function(a) {
},
dataType: 'json'
});
}
//地图数据格式转换
function generateMapData(data,map,myIcon){
var pointArr = [];
var markerArr = [];
var stationArr = [];
$.each(data,function(key, val) {
pointArr.push(new BMap.Point(val.lng,val.lat));//经纬度
stationArr.push({name:val.layer_name,id:val.layer_idx});//名称
markerArr.push(new BMap.Marker(pointArr[key],{icon:myIcon}));//标记图标
});
showMap(map,pointArr,markerArr,stationArr);
}
//显示地图
function showMap(map,points,markers,stations){
var labelArr=[];
map.centerAndZoom(points[0],10);//设置地图中心点
map.enableScrollWheelZoom(true);
$.each(markers, function(key, val) {
labelArr.push(new BMap.Label(stations[key].name,{offset:new BMap.Size(40,5)}));
var marker = markers[key];
var content = stations[key].id;
map.addOverlay(marker);
marker.setLabel(labelArr[key]);
labelArr[key].setStyle({
maxWidth:'none',
fontSize:'15px',
padding:'5px',
border:'none',
color:'#fff',
background:'#ff8355',
borderRadius:'5px'
});
addClickHandler(content,marker);
});
}
//标记图标点击事件
function addClickHandler(content,marker){
marker.addEventListener('click',function(){
$.cookie("stationId",content);//id缓存
$.cookie("left-menu",0)
location.href="SubstationStatus";//页面跳转
});
}
这样就可以显示一个地图定位了,效果如下: