【百度地图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文档。

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

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

<pre name="code" class="javascript">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