百度地圖API的第一次接觸——標註和資訊窗的使用

標籤：

1.定義js函數，用於在指定位置添加標註，在標註位置添加並開啟資訊視窗

    function addMarker(point, index){                            // 建立表徵圖對象                            var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {                            　　offset: new BMap.Size(10, 25),                  // 指定定位位置                            　　imageOffset: new BMap.Size(0, 0 - index * 25)   // 設定圖片位移                            });                            var marker = new BMap.Marker(point, {icon: myIcon});//使用表徵圖對象建立標註                            map.addOverlay(marker);                             marker.addEventListener("click", function(){         // 標註點擊事件監聽                                     var opts = {                                                 width : 250,     // 資訊視窗寬度                                                 height: 120,     // 資訊視窗高度                                                 title : "InfoWindow"  // 資訊視窗標題                                        }                                        var infoWindow = new BMap.InfoWindow("Hello World!", opts);  // 建立資訊視窗對象                                        map.openInfoWindow(infoWindow, point);      // 在標註處開啟資訊視窗                               });                       }

 

2.隨機在地圖內產生5個標註

    var bounds = map.getBounds();  //獲得地圖邊界                      
　　    var lngSpan = bounds.maxX - bounds.minX;                           var latSpan = bounds.maxY - bounds.minY;                          for (var i = 0; i < 5; i ++) {                              var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));  //在地圖範圍內隨機產生點                              addMarker(point, i);//調用1中js函數                         }

3.開啟瀏覽器看效果

百度地圖API的第一次接觸——標註和資訊窗的使用