【html5百度地图】简单使用

今天本想着使用下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");

/[b]/创建点坐标，维度、精度[/b]

var point = new BMap.Point(longitude, latitude);

//初始化地图,设置中心点坐标和地图级别。

map.centerAndZoom(point, 15);

//创建标注

var marker = new BMap.Marker(point);

//将标注添加到地图中

map.addOverlay(marker);

关于Marker对象，在百度文档中还有更多的样式，你也可以自己定制你需要的，如果有需要，也可以一起讨论下。