[关闭]
@52fhy 2015-09-11T09:31:51.000000Z 字数 3147 阅读 1571

百度地图WEB开发（1）

JavaScript 地图

示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6.     <style type="text/css">
  7.     body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
  8.     </style>
  9.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=91bc04aac3d665927d8c64750da556a9"></script>
  10.     <title>地图展示</title>
  11. </head>
  12. <body>
  13.     <div id="allmap"></div>
  14. </body>
  15. </html>
  16. <script type="text/javascript">
  17.       var map = new BMap.Map("allmap");
  18.       var point = new BMap.Point(116.404, 39.915); 
  20.       map.centerAndZoom(point, 11);
  21.       // 添加带有定位的导航控件
  22.       var navigationControl = new BMap.NavigationControl({
  23.         // 靠左上角位置
  24.         anchor: BMAP_ANCHOR_TOP_LEFT,
  25.         // LARGE类型
  26.         type: BMAP_NAVIGATION_CONTROL_LARGE,
  27.         // 启用显示定位
  28.         enableGeolocation: true
  29.       });
  30.       map.addControl(navigationControl);
  32.       // 添加定位控件
  33.       var geolocationControl = new BMap.GeolocationControl();
  34.       geolocationControl.addEventListener("locationSuccess", function(e){
  35.         console.log(e);
  36.       });
  37.       geolocationControl.addEventListener("locationError",function(e){
  38.         alert(e.message);   // 定位失败事件
  39.       });
  40.       map.addControl(geolocationControl);  
  42.       //添加覆盖物
  43.       //添加标注
  44.       var myIcon = new BMap.Icon("map.png", new BMap.Size(80, 80), {    
  45.         //offset: new BMap.Size(40, 40),    
  46.         //imageOffset: new BMap.Size(0, 0 - 0 * 25)   // 设置图片偏移    
  47.  });
  48.       var marker = new BMap.Marker(point, {icon: myIcon});        // 创建标注    
  49.       map.addOverlay(marker); 
  50.       marker.enableDragging();//标注可拖曳
  51.       //为标注添加事件
  52.       marker.addEventListener("dragend", function(e){  
  53.         console.log(e);
  54.         var info = e.point.lng + ", " + e.point.lat;
  55.          //alert(info);
  56.          addInfoWindow(info, e.point);
  57.       })
  59.       //添加信息窗口
  60.       function addInfoWindow(info, point){
  61.         var opts = {    
  62.          width : 50,     // 信息窗口宽度    
  63.          height: 30,     // 信息窗口高度    
  64.          title : "<h1>当前位置：</h1>"  // 信息窗口标题   
  65.         }    
  66.         var infoWindow = new BMap.InfoWindow(info, opts);  // 创建信息窗口对象    
  67.         map.openInfoWindow(infoWindow, point);      // 打开信息窗口
  68.       }
  70.       //添加折线
  71.       var polyline = new BMap.Polyline([    
  72.            new BMap.Point(116.399, 39.910),    
  73.            new BMap.Point(116.405, 39.920)    
  74.          ],    
  75.          {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}    
  76.         );    
  77.      //map.addOverlay(polyline);
  79.      //标签
  80.      var opts = {    
  81.          offset : 0, 
  82.          position: point, //坐标点
  83.          enableMassClear : true  
  84.         }
  85.      var label = new BMap.Label('我是标签',opts);
  86.      map.addOverlay(label);
  87.      label.setStyle({ color : "red", fontSize : "12px" , border : "none"});
  89.      //添加流量图层
  90.      var traffic = new BMap.TrafficLayer();        // 创建交通流量图层实例      
  91.      //map.addTileLayer(traffic); 
  93.      var local = new BMap.LocalSearch(map, {renderOptions:{map: map}});
  94.      //var local = new BMap.LocalSearch(map,{renderOptions: {map: map,panel: "results"}});//搜索结果面板
  95.      //var local = new BMap.LocalSearch("北京市", {renderOptions: {map: map,autoViewport: true},pageCapacity: 8});//配置搜索
  96.      //local.search("天通西苑一区");
  98.      //公交导航
  99.      var transit = new BMap.TransitRoute(map, {    
  100.          renderOptions: {map: map, panel: "results"}    
  101.     });    
  102.     //transit.search("天通西苑一区", "西单");
  104.     //驾车导航
  105.     var driving = new BMap.DrivingRoute(map, {    
  106.      renderOptions: {    
  107.        map: map,    
  108.        autoViewport: true    
  109.      }    
  110.     });    
  111.     //driving.search("中关村", "天安门");
  113.     //地理位置编码
  114.     var myGeo = new BMap.Geocoder();      
  115.     // 将地址解析结果显示在地图上，并调整地图视野    
  116.     myGeo.getPoint("北京市海淀区上地10街10号", function(point){      
  117.       if (point) {      
  118.           //map.centerAndZoom(point, 16);      
  119.           //map.addOverlay(new BMap.Marker(point));      
  120.       }      
  121.     }, "北京市");
  123.     //反向地理编码
  124.     myGeo.getLocation(new BMap.Point(116.364, 39.993), function(result){      
  125.      if (result){      
  126.          //alert(result.address);
  127.          addInfoWindow(result.address, point);
  128.       }      
  129.     });
  131. </script>

参考：
手册 http://developer.baidu.com/map/index.php
类参考 http://developer.baidu.com/map/reference/index.php
实例 http://developer.baidu.com/map/jsdemo.htm

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注