百度地图演示示例

最新推荐文章于 2022-04-04 01:47:46 发布

weixin_34408717

最新推荐文章于 2022-04-04 01:47:46 发布

阅读量379

点赞数

文章标签： javascript ViewUI

版权

百度地图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 叶子绿阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/ms_config/archive/2012/10/18/2729581.html

关注