js引用百度地图api的简单应用

街边微凉小悲伤 发布于:2015-11-08 20:34 栏目:原创 浏览:1278 评论:4
现在很多项目都需要用到地图这个功能,一般国内网站用的百度地图比较的都多,国外网站通常都是用谷歌地图。虽然在进公司的时候,项目中的百度地图啊,谷歌地图功能,大牛们早已完成,出于自己的兴趣,对百度地图做了些简单的研究,研究的都是一些基础,虽然项目中现在不需要做地图方面的功能了,但掌握一些基础的地图API还是有必要的,写个博客,做个笔记,记录下基础的API用法,方便以后需要做地图功能的时候,翻出来参考参考,下面就以百度地图为例,分享下简单的百度地图API的用法,谷歌地图以后研究了之后再分享出来。
百度地图会提供一个接口供开发者使用,在代码中直接引用这个接口:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=false"></script>
然后需要一个容器来放置地图:
<div id="map_canvas" class="store-content-left fl"><div id="wait_img_t" class="div" align="center" style="padding-top: 200px;"></div> </div>
接下来就是应用API了
var map = new BMap.Map("map_canvas");
需要注意的是,创建百度地图对象时传的参数,必须是容器的id
获取当前位置的经纬度:
navigator.geolocation.getCurrentPosition(function(p){
    latitude = p.coords.latitude;//当前位置的纬度
    longitude = p.coords.longitude;//当前位置的经度
    creatMap(latitude,longitude);
    console.log(latitude,longitude);
});
获取了经纬度,就好办了,将经纬度传给API对象:
function creatMap(a,b){
       var point = new BMap.Point(b,a);
       map.centerAndZoom(point,15);
}
这样,一个简单的应用百度地图API功能就实现了,其中“15”这个参数代表缩放比例。当然,还有很多百度地图API的用法
map.enableScrollWheelZoom();  //允许使用鼠标滚轮进行地图缩放
 map.addControl(new BMap.NavigationControl()); // 添加地图平移缩放控件 
/*在地图中添加位置图标*/
var marker = new BMap.Marker(point);  // 创建标注
map.addOverlay(marker);               // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
map.setMaxZoom(19);//控制地图的最大和最小缩放级别
map.setMinZoom(3);//控制地图的最大和最小缩放级别
这些都是一些简单的百度地图API,另外,在网上发现了很多关于百度地图功能的开发的博客,写得很好,百度地图也提供了一些实例,都可以学习。
沙发#
发布于:2015-11-08 21:00
大神
板凳#
发布于:2015-11-08 21:04
张天师:大神回到原帖
别别别,我技术很差的,所以要努力学习这些知识,顺带分享给大家一起学习
地板#
发布于:2015-11-08 21:12
张知识了,还不知道百度地图可以调用的
4楼#
发布于:2015-11-08 21:29
张天师:张知识了,还不知道百度地图可以调用的回到原帖
项目中没接触过麽
游客

返回顶部