这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
如果想用百度地图 api,首先需要先获取一个百度地图 api 的密钥,然后引入百度地图的 api,这篇文章就讲下百度地图 api 如何使用的相关资料,需要的朋友可以参考下
如果想用百度地图 api,首先需要先获取一个百度地图 api 的密钥,然后引入百度地图的 api,接下来,我们详细介绍下获取、引入 api 密钥的技巧,以及通过代码给大家详解下百度地图 api 如何使用,具体请看下文。
首先 ,如果想调用百度地图 api,你需要获取一个百度地图 api 的密钥。
申请密钥很简单,在百度地图 api 的首页就有相关链接,填写相关信息百度就会给你一个密钥了。
接下来,就是引入百度地图的 api
关键代码如下:
- <script type="text/javascript" src="http://api.map.baidu.com/api?ak=yourkey&v=2.0&services=false">
- </script>
接下来我们就可以创建一个地图试试看了。(Js 代码)
这里需要说明三点:
- var map = new BMap.Map("container"); // 创建地图实例
- var point = new BMap.Point(120.391655, 36.067588); // 创建点坐标
- map.centerAndZoom(point, 15);
- //map.centerAndZoom("北京", 15);
- //map.centerAndZoom("Hongkong", 15);
1.map.centerAndZoom 方法创建地图,第一个参数可以是根据之前创建好的一个点为中心,创建出地图,也可以根据城市地区的中文名称创建地图。(如果拼写正确,可以根据城市的英文名称来创建)
2. map.centerAndZoom 第二个参数是地图缩放级别,最大为 19,最小为 0。(但实际当缩小到 3 的时候就已经。。。)
3.BMap.Map 方法创建地图时候需要一个容器 (地图会根据容器的大小自动进行调整。),填写相关容器的 id。
关于地图大小:
可以通过
- map.setZoom();
方法主动控制地图大小级别。
也可以通过设置
- map.enableScrollWheelZoom(true);
利用鼠标滚轮控制大小。
百度地图提供了非常丰富的功能空间共我们使用。
1.Control:控件的抽象基类,所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
2.NavigationControl:地图平移缩放控件,PC 端默认位于地图左上方,它包含控制地图的平移和缩放的功能。移动端提供缩放控件,默认位于地图右下方。
3.OverviewMapControl:缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图。
4.ScaleControl:比例尺控件,默认位于地图左下方,显示地图的比例关系。
5.MapTypeControl:地图类型控件,默认位于地图右上方 (地图,卫星,三维)。
6.CopyrightControl:版权控件,默认位于地图左下方。
7.GeolocationControl:定位控件,针对移动端开发,默认位于地图左下方。
效果图
- map.addControl(new BMap.NavigationControl()); //缩放平移控件
- map.addControl(new BMap.ScaleControl()); //比例尺
- map.addControl(new BMap.OverviewMapControl()); //缩略图
- map.addControl(new BMap.MapTypeControl()); //地图类型
- map.setCurrentCity("青岛");
注意:当设置城市信息时,MapTypeControl 的切换功能才能可用
地图事件:
百度地图 API 中的大部分对象都含有 addEventListener 方法,我们可以通过该方法来监听对象事件。
实例:
- map.addEventListener("click",
- function() {
- alert("您点击了地图。");
- });
当我们不再希望监听事件时,可以将事件监听进行移除。每个 API 对象提供了 removeEventListener 用来移除事件监听函数。
- map.removeEventListener("click", functionA);
- map.addEventListener("click", functionA);
地图遮盖物:
Overlay:覆盖物的抽象基类,所有的覆盖物均继承此类的方法。
Marker:标注表示地图上的点,可自定义标注的图标。
Label:表示地图上的文本标注,您可以自定义标注的文本内容。
Polyline:表示地图上的折线。
Polygon:表示地图上的多边形。多边形类似于闭合的折线,另外您也可以为其添加填充颜色。
Circle: 表示地图上的圆。
InfoWindow:信息窗口也是一种特殊的覆盖物,它可以展示更为丰富的文字和多媒体信息。注意:同一时刻只能有一个信息窗口在地图上打开。
标注示例:
- var point = new BMap.Point(120.389472, 36.072362); //默认 可以通过Icon类来指定自定义图标
- var marker = new BMap.Marker(point);
- var label = new BMap.Label("青岛市政府", {
- offset: new BMap.Size(20, -10)
- }); //标注标签
- marker.setLabel(label) //设置标注说明
- marker.enableDragging(); //标注可以拖动的
- marker.addEventListener("dragend",
- function(e) {
- alert(e.point.lng + ", " + e.point.lat); //打印拖动结束坐标
- });
- map.addOverlay(marker);
- var point = new BMap.Point(120.387244, 36.064835);
- var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25));
- var marker2 = new BMap.Marker(point, {
- icon: myIcon
- });
- map.addOverlay(marker2);
- var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>详细信息</p>"); //弹出窗口
- marker2.addEventListener("click",
- function() {
- this.openInfoWindow(infoWindow);
- });
以上说明就是本文的全部内容,希望对大家使用百度地图 api 有所帮助。
来源: http://www.phperz.com/article/17/0717/270160.html