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

引言

 

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

定位

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

代码示例：

[javascript]  view plain  copy

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

 

例子给出了如何调用百度地图的 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【标示定位精确程度】;

创建自定义图标

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

代码示例：

[javascript]  view plain  copy

1. //定位  
2.     var geolocation = new BMap.Geolocation();  
3.     geolocation.getCurrentPosition(function(result){  
4.         if(this.getStatus() == BMAP_STATUS_SUCCESS){  
5.             var mk = new BMap.Marker(result.point);//创建一个覆盖物  
6.             map.addOverlay(mk);//增加一个标示到地图上  
7.             addMarker(result.point);  
8.             latitude  = result.point.lat;//获取到的纬度  
9.             longitude = result.point.lng;//获取到的经度  
10.         }  
11.     });  
12.   
13.     function addMarker(point){  // 创建图标对象     
14.         var myIcon = new BMap.Icon("position.png", new BMap.Size(23, 50), {offset: new BMap.Size(10, 25)});  
15.         // 创建标注对象并添加到地图     
16.         var marker = new BMap.Marker(point, {icon: myIcon});      
17.         map.addOverlay(marker);  
18.     }  

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

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

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

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

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

代码实例：

[javascript]  view plain  copy

1. <pre name="code" class="javascript">map.addEventListener("click", function(e){  
2.     longitude = e.point.lng;  
3.     latitude  = e.point.lat;  
4. });  

 

这里的map是实例化的地图对象，百度地图增加了addEventListener方法，可以按需给地图添加事件，我们这里添加一个点击事件到地图，当用户点击地图的时候就会触发这个事件，事件的回调函数的参数是一个对象，对象的point属性带有经纬度坐标的信息。

---

点关注，不迷路

文章每周持续更新，可以微信搜索「 十分钟学编程 」第一时间阅读和催更，如果这个文章写得还不错，觉得有点东西的话 ~求点赞👍 求关注❤️ 求分享❤️ 
各位的支持和认可，就是我创作的最大动力，我们下篇文章见！