Quantcast
Channel: CSDN博客推荐文章
Viewing all articles
Browse latest Browse all 35570

【html5百度地图】简单使用

$
0
0

今天本想着使用下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对象,在百度文档中还有更多的样式,你也可以自己定制你需要的,如果有需要,也可以一起讨论下。


作者:boiaprogramfan0420 发表于2012-12-29 21:13:36 原文链接
阅读:59 评论:0 查看评论

Viewing all articles
Browse latest Browse all 35570

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>