你的位置:首页 > Java教程

[Java教程]百度地图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 <script src="http://api.map.baidu.com/api?v=2.0&ak=添你申请的密钥" type="text/javascript"></script>

在body中添加一个块

 <div id="map"></div>

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、完整的代码如下,本人也是第一次接触。

<!DOCTYPE html><html><head>  <meta name="viewport" content="width=device-width" />  <script src="http://api.map.baidu.com/api?v=2.0&ak=密钥" type="text/javascript"></script>  <title>百度地图</title>  <style type="text/css">    body, html {      width: 100%;      height: 100%;      margin: 0;      font-family: "微软雅黑";    }    #map {      width: 100%;      height: 500px;      margin: 0;    }  </style></head><body>  <div id="map"></div></body></html><script>  var map = new BMap.Map("map", { enableMapClick: false });//地图实例  var point = new BMap.Point(116.404, 39.915);//创建中心点坐标  map.centerAndZoom(point, 15);//设置中心点坐标和地图级别  setTimeout(function () {    map.setZoom(12);  }, 2000);  map.enableScrollWheelZoom(true);  var points = { "p1": ["116.402544", "39.914714"], "p2": ["116.380697", "39.905859"], "p3": ["116.481307", "39.950786"] };  for (var i in points) {    var point = new BMap.Point(points[i][0], points[i][1]);    addMarker(point, i);  }  // 编写自定义函数,创建标注  //var marker;  function addMarker(point, name) {    var label = new BMap.Label(name, { offset: new BMap.Size(20, -10) });    var marker = new BMap.Marker(point, {      // 指定Marker的icon属性为Symbol      icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {        scale: 1.5,//图标缩放大小        fillColor: "red",//填充颜色        fillOpacity: 0.8//填充透明度      })    });//创建标注    //单击事件    marker.addEventListener("click", function () {      var p = marker.getPosition();      alert(p.lng + " " + p.lat);    });    map.addOverlay(marker);//将标注添加到地图上    marker.setLabel(label);    marker.setTitle(name);  }</script>