【百度地图API·javascriptapi】地图定位、创建自定义图标、获取用户点击位置

引言

地图在网页上的应用远不止于展示，我们可以借助百度地图定位用户的当前位置，在地图上创建自定义的标记，或者在用户点击地图的时候，获取用户点击位置的经纬度。

定位

百度地图给用户提供了专门的定位api，他是借助浏览器的 geolocation来获取用户的位置。

代码示例：

	// 百度地图API功能
	var map = new BMap.Map("allmap");//创建百度地图实例，这里的allmap是地图容器的id
	var point = new BMap.Point(113.721713, 34.774855);//创建一个点对象，这里的参数是地图上的经纬度
	map.centerAndZoom(point, 12);//这里是将地图的中心移动到我们刚才创建的点；这里的12是地图的缩放界别；数值越大，地图看的越细
	
	//定位
	var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(result){
    	if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(result.point);//创建一个覆盖物
            map.addOverlay(mk);//增加一个标示到地图上
            map.panTo(result.point);
            latitude  = result.point.lat;//获取到的纬度
            longitude = result.point.lng;//获取到的经度
        }
    });

例子给出了如何调用百度地图的 Geolocation 来获取用户的位置，这个方法的使用需要浏览器的支持。目前可以支持地理定位的浏览器有Opera 10.6 （包括 Opera Mobile 10.1）、Chrome 5、Firefox 3.6以及Safari 5（包括iPhone上的Safari Mobile）。关于浏览器定位的其他资料，可以自行百度。

getCurrentPosition方法

getCurrentPosition的回调函数里的参数，在定位成功的时候，传递的是一个 GeolocationResult 对象，如果定位失败，则会返回null。

另外，在回调函数里使用 this.getStatus()函数可以获取到定位的状态码，如果定位成功，返回的状态码是 BMAP_STATUS_SUCCESS，其他的均表示不成功。

回调函数的参数

关于回调函数的参数 GeolocationResult 对象，这个对象包含了两个属性，point【当前坐标点】和accuracy【标示定位精确程度】;

创建自定义图标

在做地图相关的开发的时候，我们经常有这样的需求，就是客户要求我们在地图上标示出门店的位置，有时候还会要求我们用他们的图标来标示，那么百度地图可以实现吗？答案是能。

代码示例：

//定位
	var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(result){
    	if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(result.point);//创建一个覆盖物
            map.addOverlay(mk);//增加一个标示到地图上
            addMarker(result.point);
            latitude  = result.point.lat;//获取到的纬度
            longitude = result.point.lng;//获取到的经度
        }
    });

    function addMarker(point){  // 创建图标对象   
		var myIcon = new BMap.Icon("position.png", new BMap.Size(23, 50), {offset: new BMap.Size(10, 25)});
		// 创建标注对象并添加到地图   
		var marker = new BMap.Marker(point, {icon: myIcon});    
		map.addOverlay(marker);
	}

这个是上一个程序的修改版本，这里添加到地图上的图标不再是百度地图原生的图标，而是我们自定义的一个图标，这个图片可以是我们需要的任意图标，并且我们可以控制图标的位置。

创建图标的方法中可以通过参数来规定图片的位置，如果你使用的是一张大图中的某一个小图，还可以设置图片的偏移量。

更多的内容可以查看百度地图的api文档。

获取用户在地图上的点击位置

这个大家应该都明白，这个功能可以给用户提供选择收货地址，最近的消费门店等功能。

代码实例：

map.addEventListener("click", function(e){
   	longitude = e.point.lng;
    latitude  = e.point.lat;
});
 
     
 
     
 
     
 这里的map是实例化的地图对象，百度地图增加了addEventListener方法，可以按需给地图添加事件，我们这里添加一个点击事件到地图，当用户点击地图的时候就会触发这个事件，事件的回调函数的参数是一个对象，对象的point属性带有经纬度坐标的信息。 
    

我的博客： http://www.sibowen.com/index.php?m=Home&c=Article&a=viewArticle&classifyId=10&articleId=15