叶子绿

分享自己的一些前端经验,做改变世界的产品。 再次出发…

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

简介

百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富、交互性强的地图应用。百度地图API包含了构建地图基本功能的各种接口,提供了诸如本地搜索、路线规划等数据服务。 文档地址
我做的一个简单例子

代码如下:

   1:  <!DOCTYPE html>
   2:  <html lang="en">
   3:  <head>
   4:      <meta charset="UTF-8" />
   5:      <title>百度地图示例</title>
   6:  </head>
   7:  <body>
   8:      <div id ="map"  style ="width:520px;height:340px; margin:auto; " ></div>
   9:      <script src="map.js" type="text/javascript" charset="utf-8"></script>
  10:  </body>
  11:  </html>
   1:  var lati=31.233;
   2:  var lngi=121.491;
   3:  //地图加载初始化
   4:  function initialize() { 
   5:      var mp = new BMap.Map('map');                
   6:      var point=new BMap.Point(lngi,lati);
   7:      mp.centerAndZoom(point, 11);
   8:      mp.addControl(new BMap.MapTypeControl());
   9:      //添加位置标记
  10:      var marker = new BMap.Marker(point);
  11:      mp.addOverlay(marker);
  12:      marker.enableDragging();
  13:      //添加标记点击事件,事件触发弹出气泡提示
  14:      marker.addEventListener("click", function (e) {
  15:          var ePoint = new BMap.Point(e.point.lng, e.point.lat);
  16:          var myGeo = new BMap.Geocoder();
  17:          var opts = { width: 40, height: 40, title: "位置信息" }
  18:   
  19:          myGeo.getLocation(ePoint, function (addr) {
  20:              if (addr) {                                                          
  21:                  var infoWindow = new BMap.InfoWindow( addr.address+" 经度:"+e.point.lng+" 纬度:"+e.point.lat, opts);
  22:                  mp.openInfoWindow(infoWindow, ePoint);
  23:              }            
  24:          });
  25:      });
  26:  }
  27:   
  28:  var script = document.createElement("script");
  29:  script.src = "http://api.map.baidu.com/api?v=1.3&callback=initialize";
  30:  document.body.appendChild(script);
posted on 2012-10-18 15:26  叶子绿  阅读(433)  评论(0编辑  收藏  举报