百度地圖（5）-添加標注

這里所說的標注，就是圖元對象的意思，也就是向地圖上添加各種各樣的對象。

所以，標注就牽涉到兩個要素：位置和要素，位置知道它在哪里，樣式知道它是什么樣子。

百度地圖主要通過Marker以及Overlay來進行標注的定義和添加。

1.  添加點要素並添加點擊事件。

 

function addMarkerPoint() {

  var marker = new BMap.Marker(point);
  map.addOverlay(marker);

  marker.addEventListener("click", function () {

    var htmlContent = ["<div class='infoBoxContent'><div class='title'><strong>中海雅園</strong><span class='price'>均價43000，overlay-下面的鏈接無法打開，而infobox可以</span></div>",
      "<div class='list'><ul><li><div class='left'><img src='/bdMap/img/house3.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>中海雅園南北通透四居室</a><p>4室2廳，205.00平米，3層</p></div><div class='rmb'>760萬</div></li>"
      ,"<li><div class='left'><img src='/bdMap/img/house1.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>中海雅園四居室還帶保姆間</a><p>2室1廳，112.00平米，16層</p></div><div class='rmb'>300萬</div></li>"
      ,"<li><div class='left'><img src='/bdMap/img/house2.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>《有鑰匙 隨時看》花園水系</a><p>3室2廳，241.00平米，16層</p></div><div class='rmb'>400萬</div></li>"
      ,"<li><div class='left'><img src='/bdMap/img/house3.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>富力城D區正規樓王大三居</a><p>3室3廳，241.00平米，17層</p></div><div class='rmb'>600萬</div></li>"
      ,"<li class='last'><div class='left'><img src='/bdMap/img/house1.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>富力城豪，身份人士的象征</a><p>4室2廳，213.90平米，25層</p></div><div class='rmb'>700萬</div></li>"
      ,"</ul></div>"
      ,"</div>"];

    var richContent = new BMapLib.RichMarker(htmlContent.join(""),point,{

      "anchor": new BMap.Size(-72,-86),
      "enableDragging":true
    });
    map.addOverlay(richContent);

  });
  marker.enableDragging();
  marker.addEventListener("dragend", function(e){
    alert("當前位置：" + e.point.lng + ", " + e.point.lat);
  });
}

 

2. 點標注對象

  var marker = new BMap.Marker(point);
  map.addOverlay(marker);

定義了一個 Marker 對象， point為定義的公共變量，默認為地圖初始化時的中心點。

然后在地圖上通過Overlay添加Marker。這樣添加一個默認點標注的功能就完成了。

 

3. 富文本標注

var richContent = new BMapLib.RichMarker(htmlContent.join(""),point,{

  "anchor": new BMap.Size(-72,-86),
  "enableDragging":true
});
map.addOverlay(richContent);

定義了一個富標注的對象，其包含在BMapLib 中，

引用參考代碼：

 <script type="text/javascript" src="/bdMap/js/BMapLib/RichMarker.min.js"></script>

 

4. 添加線標注

  var polyline = new BMap.Polyline([
      new BMap.Point(117.2972,31.8988),
      new BMap.Point(117.2872,31.9088)
    ],
    {
      strokeColor:"blue",
      strokeWeight:6,
      strokeOpacity:0.5
    });
  map.addOverlay(polyline);

這里定義了一個Polyline的對象，定義了兩個點的坐標，以及填充的顏色、透明度以及線寬度。

 

5. 添加區域標注

var circle = new BMap.Circle(point,500,{ //圓形區域
    strokeColor:"green",
    strokeWeight:2,
    strokeOpacity:0.7
  });

  circle.addEventListener("click",function () {
    var center = circle.getBounds().getCenter();
    addSimpleInfo(center,"你點了這個圓。");
  });
  map.addOverlay(circle);

  var pEnd = new BMap.Point(117.3172,31.9188); // 長方形區域
  var rectangle = new BMap.Polygon([
    new BMap.Point(point.lng,point.lat),
    new BMap.Point(pEnd.lng,point.lat),
    new BMap.Point(pEnd.lng,pEnd.lat),
    new BMap.Point(point.lng,pEnd.lat)
  ],{
    strokeColor:'yellow',
    strokeWeight:2,
    strokeOpacity:0.5
  });
  rectangle.addEventListener("click",function () {
    var center = rectangle.getBounds().getCenter();
    addSimpleInfo(center,"你點了這個長方形。");
  });
  map.addOverlay(rectangle);

  var polygon = new BMap.Polygon([ //多邊形區域
    new BMap.Point(117.2972,31.8988),
    new BMap.Point(117.2625,31.8635),
    new BMap.Point(117.3223,31.8534),
    new BMap.Point(117.3568,31.85863),
    new BMap.Point(117.3465,31.88641)
  ],{
    strokeColor:"red",
    strokeWeight: 3,
    strokeOpacity: 0.6
  });
  polygon.addEventListener("click",function (){
    var center = polygon.getBounds().getCenter();
    addSimpleInfo(center,"你點了個多邊形。")
  })
  map.addOverlay(polygon);

 

6. 添加TextIcon標注

  map.addOverlay(new BMapLib.TextIconOverlay(new BMap.Point(117.2972,31.8988), 7));
  map.addOverlay(new BMapLib.TextIconOverlay(new BMap.Point(117.2625,31.8635), 15));
  map.addOverlay(new BMapLib.TextIconOverlay(new BMap.Point(117.3223,31.8534), 24));
  map.addOverlay(new BMapLib.TextIconOverlay(new BMap.Point(117.3568,31.85863), 48));
  map.addOverlay(new BMapLib.TextIconOverlay(new BMap.Point(117.3465,31.88641), 99));

TextIcon 類包含在BMapLib 的庫中，具體引用參考代碼。

 

7. 添加自定義圖標

/**
 * 添加自定義圖標標注
 **/
function addMarkerIcon(){
  var myIcon = new BMap.Icon("/bdMap/img/1.gif",new BMap.Size(36,36));
  var pt =new BMap.Point(117.3172,31.9188);
  var marker = new BMap.Marker(pt,{
    icon: myIcon
  });
  marker.enableDragging();
  map.addOverlay(marker);

  var opts = {
    position: pt,
    offset: new BMap.Size(10,10)
  }
  var label = new BMap.Label("這是一個測試用的站點",opts);

  marker.addEventListener("onmouseout", function(e) {
    map.removeOverlay(label);
  });
  marker.addEventListener("onmouseover", function(e) {
    console.log("泵房站點: " + e.point.lng + " , " + e.point.lat + " ; " + e.pixel.x + " , " + e.pixel.y + " | ");
    map.addOverlay(label);
  });

  addMarkerInfo(marker);
}

 

8. 頁面顯示

 

 

 

 9. 代碼參考

https://github.com/WhatGIS/bdMap