zoukankan      html  css  js  c++  java
  • 百度地图演示示例

    简介

    百度地图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 ="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 = {  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);
  • 相关阅读:
    每周分享五个 PyCharm 使用技巧(一)
    深入理解 Python 中的上下文管理器
    Delphi中Chrome Chromium、Cef3学习笔记(四)
    DELPHI中自定义消息的发送和接收
    Delphi2010/XE2下隐藏程序系统任务栏的图标
    批处理经典入门教程!(从不懂到高手)第2/5页
    批处理经典入门教程!(从不懂到高手)1/5
    批处理taskkill运行结束不掉程序以及停留问题
    delphi EncdDecd.pas单元中Encoding方法出现#$D#$A的解决方法
    Delphi中Chrome Chromium、Cef3学习笔记(三)
  • 原文地址:https://www.cnblogs.com/ms_config/p/2729581.html
Copyright © 2011-2022 走看看