Google Maps API V3 之繪圖庫 信息窗口

Google官方教程：

Google 地圖 API V3 使用入門

Google 地圖 API V3 針對移動設備進行開發

Google 地圖 API V3 之事件

Google 地圖 API V3 之控件

Google 地圖 API V3 之 疊加層

Google Maps API V3 之繪圖庫 信息窗口

Google Maps API V3 之 圖層

Google Maps API V3 之 路線服務

 

 

繪圖庫

 

本文檔中的概念僅適用於 google.maps.drawing 庫中提供的地圖項。默認狀況下，系統在加載 Maps JavaScript API 時不會加載該庫，您必須使用 libraries 引導程序參數進行明確指定。 

http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing 

DrawingManager 類提供了一個圖形界面，以供用戶在地圖上繪製多邊形、矩形、折線、圓形和標記。DrawingManager 對象以以下方式建立：

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

DrawingManager 選項

DrawingManager 構造函數採用一組選項，以定義要顯示的控件集、控件的位置以及初始繪圖狀態。

• DrawingManager 的 drawingMode 屬性用於定義 DrawingManager 的初始繪圖狀態。該屬性接受 google.maps.drawing.OverlayType 常量，且默認爲 null（在此狀況下啓動 DrawingManager 時，光標會處於非繪圖模式）。
• DrawingManager 的 drawingControl 屬性用於定義地圖上的繪圖工具選擇界面的可見性。該屬性接受布爾值。
• 您還可使用 DrawingManager 的 drawingControlOptions 屬性，定義控件的位置以及控件中應表示的疊加層的類型。
  • position 用於定義繪圖控件在地圖上的位置，且接受 google.maps.ControlPosition 常量。
  • drawingModes 是一組 google.maps.drawing.OverlayType 常量，且用於定義繪圖控件形狀選擇器中包含的疊加層類型。系統將始終顯示手形圖標，以便用戶無需繪圖便可與地圖進行交互。
• 您可爲每種疊加層類型都指定一組默認屬性，以便定義首次建立相應疊加層時所採用的外觀。這些屬性可在疊加層的 {overlay}Options 屬性（其中 {overlay} 表示疊加層的類型）中進行定義。例如，圓形的填充屬性、筆觸屬性、zIndex 和可點擊性可以使用 circleOptions 屬性進行定義。若是已傳遞任何大小、位置或地圖值，則系統會忽略這些默認屬性。

var drawingManager = new google.maps.drawing.DrawingManager({  
  drawingMode: google.maps.drawing.OverlayType.MARKER,  
  drawingControl: true,  
  drawingControlOptions: {  
    position: google.maps.ControlPosition.TOP_CENTER,  
    drawingModes: [google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.CIRCLE]  
  },  
  markerOptions: {  
    icon: new google.maps.MarkerImage('http://www.example.com/icon.png')  
  },  
  circleOptions: {  
    fillColor: '#ffff00',  
    fillOpacity: 1,  
    strokeWeight: 5,  
    clickable: false,  
    zIndex: 1,  
    editable: true  
  }  
});  
drawingManager.setMap(map);  

 

更新繪圖工具控件

建立 DrawingManager 對象後，您可調用 setOptions() 並傳遞新的值，以進行更新。

drawingManager.setOptions({  
  drawingControlOptions: {  
    position: google.maps.ControlPosition.BOTTOM_LEFT,  
    drawingModes: [google.maps.drawing.OverlayType.MARKER]  
  }  
});  

 

使用如下方法便可隱藏或顯示繪圖工具控件：

// To hide:  
drawingManager.setOptions({  
  drawingControl: false  
});  
  
// To show:  
drawingManager.setOptions({  
  drawingControl: true  
});  

 

要從 map 對象刪除繪圖工具控件，請使用如下方法：

drawingManager.setMap(null);

隱藏繪圖控件會使得該控件不顯示，可是DrawingManager類的功能依然可用。若是須要，您能夠按照此方式實現本身的控件。從map對象上移除DrawingManager類，則會移除全部繪圖功能。若是全部繪製要素要重置的話，那麼DrawingManager類經過drawingManager.setMap(map)或者構造新的DrawingManager對象來和地圖從新關聯。

Drawing事件

當一個圖形Overlay被建立時，有兩個事件會被激發：

• 一個是{Overlay}complete事件（{overlay}表明了overlay的類型，好比circlecomplete，polycomplete事件等）。overlay的句柄做爲參數傳入。
• 一個是overlaycomplete事件。一個對象數組，包含OverlayType以及overlay的句柄。

google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
  var radius = circle.getRadius();
});

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  if (event.type == google.maps.drawing.OverlayType.CIRCLE) {
    var radius = event.overlay.getRadius();
  }
});

信息窗口（InfoWindow）

InfoWindow 在地圖上方的浮動窗口中顯示內容。信息窗口有點像漫畫書上的文字氣球，它有一個內容區域和錐形引線，引線的頭位於地圖的指定位置上。經過點擊 Google Maps 上的商戶標記，您能夠看到活動的信息窗口。

 InfoWindow 構造函數採用的是 InfoWindow options 對象，該對象指定了用於顯示信息窗口的一組初始參數。在建立信息窗口的過程當中，系統不會在地圖上添加信息窗口。要顯示信息窗口，您須要調用 InfoWindow 上的 open() 方法，向其傳遞要在其中打開信息窗口的 Map，以及向其傳遞用於錨定信息窗口的 Marker（可選）。（若是未提供任何標記，那麼，會在其 position 屬性上打開信息窗口）。

 InfoWindow options 對象是包含如下字段的對象常量：

• content 包含了信息窗口打開時，系統要在其中顯示的文本字符串或 DOM 節點。
• pixelOffset 包含了從信息窗口的頂部到信息窗口錨定位置的偏移量。實際上，您不該也無需修改此字段。
• position 包含了此信息窗口錨定位置的 LatLng。請注意，在標記上執行打開信息窗口操做時，系統會自動使用一個新位置更新該值。
• maxWidth 指定了信息窗口的最大寬度（以像素爲單位）。默認狀況下，信息窗口會根據其中包含的內容進行擴展，若是信息窗口隨着地圖的大小而擴展，那麼，文本將會自動換行。若是您應用了 maxWidth，那麼，信息窗口將自動換行以強制適應像素的寬度。若是屏幕的實際使用面積容許的話，信息窗口在達到最大寬度後仍可垂直擴展。

InfoWindow 的內容能夠是文本字符串、HTML 代碼段或 DOM 元素自己。要設置此內容，請在 InfoWindow options 構造函數中傳遞該內容，或者對InfoWindow顯式調用 setContent()。若是想要顯式調整內容的大小，您可使用 <div> 進行此操做，若是您願意，還能夠啓用滾動功能。請注意，若是您沒有啓用滾動功能，而內容的大小又超過了信息窗口的可用空間，那麼，內容可能會從信息窗口中「溢」出。

InfoWindow 可附加到 Marker 對象（在這種狀況下，它們的位置取決於標記的位置）上，或附加到地圖自己指定的 LatLng 位置上。若是您一次只想顯示一個信息窗口（正如 Google Maps 上的相應行爲），那麼，您只需建立一個信息窗口，而後在地圖事件（例如用戶點擊）執行過程當中將此信息窗口從新分配到不一樣的位置或標記中。但與 Google Maps API 第 2 版中的相應行爲不一樣的是，若是您選擇進行上述操做，那麼，地圖可能會當即顯示多個 InfoWindow 對象。

要更改信息窗口的位置，您能夠對信息窗口調用 setPosition() 以顯式的方式更改其位置，或者使用 InfoWindow.open() 方法將信息窗口附加到新標記上。請注意，若是您在沒有傳遞標記的狀況下調用了 open()，那麼，InfoWindow 將會使用在構建過程當中經過 InfoWindow options 對象指定的位置。

如下代碼顯示了澳大利亞中心位置的標記。點擊該標記可顯示信息窗口。

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">Uluru</h2>'+
    '<div id="bodyContent">'+
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the '+
    'Northern Territory, central Australia. It lies 335 km (208 mi) '+
    'south west of the nearest large town, Alice Springs; 450 km '+
    '(280 mi) by road. Kata Tjuta and Uluru are the two major '+
    'features of the Uluru - Kata Tjuta National Park. Uluru is '+
    'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
    'Aboriginal people of the area. It has many springs, waterholes, '+
    'rock caves and ancient paintings. Uluru is listed as a World '+
    'Heritage Site.</p>'+
    '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
    'http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>'+
    '</div>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Uluru (Ayers Rock)"
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

查看示例 (infowindow-simple.html)

如下顯示了將信息窗口 maxWidth 設置爲 200 像素的示例：

查看示例 (infowindow-simple-max.html)