使用百度地图SDK做位置定位显示

首先需要百度账号开通百度开发者，并在百度地图开放平台创建应用并申请应用密钥。

我们要做一个地点定位，最重要的就是获取该地点的经纬度，通过经纬度去定位该地点在地图中的位置。首先从添加地点开始说起，也就是你创建一个地标建筑并输入其位置保存的时候，这个时候就应该获取这个建筑的经纬度并保存在你的数据库中，方便后面地图定位页面读取，因为创建地址解析器并调用解析方法后，解析出的经纬度数据的作用域仅在这个解析方法之内，我尝试过很多其他的方法，都不能在方法外部获得经纬度数据，所以在创建地标建筑时就应该解析经纬度并保存。当然要保证输入的地点在地图上找得到，因为百度地图并不能定位到其他行星上。

使用百度地图之前我们要引用百度地图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";//页面跳转
	});
}

这样就可以显示一个地图定位了，效果如下：