700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 【百度地图API·javascriptapi】地图定位 创建自定义图标 获取用户点击位置

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

时间:2018-12-21 16:00:55

相关推荐

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

引言

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

定位

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

代码示例:

// 百度地图API功能var map = new BMap.Map("allmap");//创建百度地图实例,这里的allmap是地图容器的idvar 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属性带有经纬度坐标的信息。

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。