百度地图API 简单案例

一、介绍

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，且支持HTML5特性的地图开发。

您需先申请密钥才可使用，请参考：http://lbsyun.baidu.com/apiconsole/key?application=key

参考文档：http://developer.baidu.com/map/index.php?title=jspopular

第一次写博客。

二、实现

1、建立地图

首先在页面上引用百度的js

 

1  

在body中添加一个块

View Code

编写js代码，这样浏览页面后就能看到地图了，但是地图不能通过鼠标滑轮进行缩放，

1 var map = new BMap.Map("map");//地图实例
//如果想要禁用地图上原有的InfoWindow弹出框：var map = new BMap.Map("map", { enableMapClick: false })

2 var point = new BMap.Point(116.404, 39.915);//创建中心点坐标
3 map.centerAndZoom(point, 15);//设置中心点坐标和地图级别

2、增加缩放功能

1 setTimeout(function () {
2         map.setZoom(12);//12代表地图的级别，数字越小，显示的范围越大。
3     }, 2000);
4     map.enableScrollWheelZoom(true);

3、使用自定义的方式在地图上添加坐标点

 1 // 编写自定义函数,创建标注
 2     //var marker;
 3     function addMarker(point, name) {
 4         var label = new BMap.Label(name, { offset: new BMap.Size(20, -10) });
 5         var marker = new BMap.Marker(point, {
 6             // 指定Marker的icon属性为Symbol
 7             icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
 8                 scale: 1.5,//图标缩放大小
 9                 fillColor: "red",//填充颜色
10                 fillOpacity: 0.8//填充透明度
11             })
12         });//创建标注
13 
14         //单击事件
15         marker.addEventListener("click", function () {
16             var p = marker.getPosition();//获取坐标的位置
17             alert(p.lng + "  " + p.lat);
18         });
19         map.addOverlay(marker);//将标注添加到地图上
20         marker.setLabel(label);
21         marker.setTitle(name);
         }

4、创建坐标，这里的坐标是写死的，可以通过获取数据库中的数据动态的绑定坐标

1 var points = { "p1": ["116.402544", "39.914714"], "p2": ["116.380697", "39.905859"], "p3": ["116.481307", "39.950786"] };
2     for (var i in points) {
3         var point = new BMap.Point(points[i][0], points[i][1]);
4         addMarker(point, i);
5     }

5、完整的代码如下，本人也是第一次接触。