今天本想着使用下google地图的API,没想到呢,国内这网速又要让我吐槽一番。
然后想想,好吧,百度好歹也是国产精英,然后去百度开发者网站看了下,果然不赖,而且和google map用法也是大同小异。
geolocation是navigator的一个属性,它是一个地理位置对象,要使用这个对象,首先需要去检测浏览器是不是支持,如果对JS比较熟悉,那么if(navigator.geolocation)也不是很难理解。在这个对象里有一些方法,例如获得位置getCurrentPosition(),这个也是最重要的方法,这个方法中可以有3个参数,我在这里也就介绍第一个参数,后两个参数如果有兴趣,可以去查阅ECMAScript规范,第一个参数是一个回调函数,这个函数可以传一个参数,它是关于地理位置信息,如坐标、地址等等,要想调用百度地图并且显示当前位置,那我们可以先把你所处的位置确定下来
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
这里需要说明一下,如果使用的是PC或者笔记本的话,获得位置是使用你IP地址所获得的,这是最不理想的一种获得位置的方法,获得的地理信息多半是你上网的服务器所在的。如果想要获得更高端的、更准确的,那你必须使用GPS,所以移动的效果要好得多,因为PC调用和移动调用是一样的,这里也只是介绍如何使用,所以就没必要去纠结了。
接下来就是调用百度API的事情了,首先必须要做的是将百度API引用到当前页面中
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
这里的1.4代表API的版本,
// 创建Map实例
var map = new BMap.Map("container");
//创建点坐标,维度、精度
var point = new BMap.Point(longitude, latitude);
//初始化地图,设置中心点坐标和地图级别。
map.centerAndZoom(point, 15);
//创建标注
var marker = new BMap.Marker(point);
//将标注添加到地图中
map.addOverlay(marker);
关于Marker对象,在百度文档中还有更多的样式,你也可以自己定制你需要的,如果有需要,也可以一起讨论下。