Google地圖官方API-在地圖上繪圖（自定義疊加層）

自定義疊加層

介紹

疊加層是地圖上與緯度/經度坐标綁定的對象，是以在您拖動或縮放地圖時它們會移動。有關預定義疊加層類型的資訊，請參見 在地圖上繪制。

Maps JavaScript API提供了一個 用于建立您自己的自定義疊加層的類。該 是一個基類，提供您在建立疊加層時必須實作幾種方法。該類還提供了一些方法，可以在螢幕坐标和地圖上的位置之間進行轉換。 OverlayViewOverlayView

添加自定義疊加層

以下是建立自定義疊加層所需步驟的摘要：

将您的自定義疊加層對象設定prototype為的新執行個體google.maps.OverlayView()。實際上，這将覆寫覆寫類。

為您的自定義疊加層建立一個構造函數，并設定所有初始化參數。

onAdd()在原型中實作一個方法，然後将疊加層附加到地圖上。OverlayView.onAdd() 當地圖準備好附加疊加層時，将調用。

draw()在原型中實作一種方法，并處理對象的視覺顯示。OverlayView.draw() 首次顯示對象時将調用。

您還應該實作一種onRemove()方法來清除在疊加層中添加的所有元素。

以下是每個步驟的更多詳細資訊。您還可以看到完整的工作示例： view example。

子類覆寫

下面的示例OverlayView用于建立簡單的圖像疊加層。

// This example creates a custom overlay called USGSOverlay, containing

// a U.S. Geological Survey (USGS) image of the relevant area on the map.

// Set the custom overlay object's prototype to a new instance

// of OverlayView. In effect, this will subclass the overlay class therefore

// it's simpler to load the API synchronously, using

// google.maps.event.addDomListener().

// Note that we set the prototype to an instance, rather than the

// parent class itself, because we do not wish to modify the parent class.

var overlay;

USGSOverlay.prototype = new google.maps.OverlayView();

// Initialize the map and the custom overlay.

function initMap() {

var map = new google.maps.Map(document.getElementById('map'), {

zoom: 11,
center: {lat: 62.323907, lng: -150.109291},
mapTypeId: 'satellite'           

});

var bounds = new google.maps.LatLngBounds(

new google.maps.LatLng(62.281819, -150.287132),
  new google.maps.LatLng(62.400471, -150.005608));
           

// The photograph is courtesy of the U.S. Geological Survey.

var srcImage = '

https://developers.google.com/maps/documentation/

' +

'javascript/examples/full/images/talkeetna.png';
           

// The custom USGSOverlay object contains the USGS image,

// the bounds of the image, and a reference to the map.

overlay = new USGSOverlay(bounds, srcImage, map);

}

現在，我們為USGSOverlay該類建立一個構造函數，并将傳遞的參數初始化為新對象的屬性。

/* @constructor /

function USGSOverlay(bounds, image, map) {

// Initialize all properties.

this.bounds_ = bounds;

this.image_ = image;

this.map_ = map;

// Define a property to hold the image's div. We'll

// actually create this div upon receipt of the onAdd()

// method so we'll leave it null for now.

this.div_ = null;

// Explicitly call setMap on this overlay.

this.setMap(map);

我們尚無法将此疊加層附加到疊加層的構造函數中的地圖上。首先，我們需要確定地圖的所有窗格均可用，因為它們指定了對象在地圖上的顯示順序。API提供了一個訓示此情況已發生的輔助方法。我們将在下一部分中處理該方法。

初始化疊加

首次執行個體化疊加層并準備顯示它時，我們需要通過浏覽器的DOM将其附加到地圖上。API通過調用疊加層的onAdd() 方法來訓示該疊加層已添加到地圖。要處理此方法，我們建立一個

來儲存圖像，添加一個元素，将其附加到 ，然後将疊加層附加到地圖的窗格之一。窗格是DOM樹中的一個節點。

類型為的窗格 指定地圖上不同圖層的堆疊順序。以下窗格可用，并按從下到上的堆疊順序進行枚舉： MapPanes

mapPane是最低的窗格，位于圖塊上方。它可能不會收到DOM事件。（窗格0）。

overlayLayer包含折線，多邊形，地面疊加層和圖塊圖層疊加層。它可能不會收到DOM事件。（窗格1）。

markerLayer包含标記。它可能不會收到DOM事件。（窗格2）。

overlayMouseTarget包含接收DOM事件的元素。（窗格3）。

floatPane包含資訊視窗。它位于所有地圖疊加層上方。（窗格4）。

因為我們的圖像是“地面疊加層”，是以我們将使用overlayLayer 窗格。有了該窗格後，我們将把它的對象作為子對象附加到它。

/**

• onAdd is called when the map's panes are ready and the overlay has been

• added to the map.

  */

USGSOverlay.prototype.onAdd = function() {

var div = document.createElement('div');

div.style.borderStyle = 'none';

div.style.borderWidth = '0px';

div.style.position = 'absolute';

// Create the img element and attach it to the div.

var img = document.createElement('img');

img.src = this.image_;

img.style.width = '100%';

img.style.height = '100%';

img.style.position = 'absolute';

div.appendChild(img);

this.div_ = div;

// Add the element to the "overlayLayer" pane.

var panes = this.getPanes();

panes.overlayLayer.appendChild(div);

};

繪制覆寫

請注意，我們在上面的代碼中沒有調用任何特殊的可視顯示。draw()每當需要在地圖上繪制疊加層（包括首次添加疊加層）時，API 都會在疊加層上調用單獨的方法。

是以draw()，我們将實作此方法，MapCanvasProjection 使用來檢索疊加層，getProjection()并計算錨定對象的右上和左下點的确切坐标。然後，我們可以調整的大小

。反過來，這将調整圖像的大小以比對我們在疊加層的構造函數中指定的邊界。

USGSOverlay.prototype.draw = function() {

// We use the south-west and north-east

// coordinates of the overlay to peg it to the correct position and size.

// To do this, we need to retrieve the projection from the overlay.

var overlayProjection = this.getProjection();

// Retrieve the south-west and north-east coordinates of this overlay

// in LatLngs and convert them to pixel coordinates.

// We'll use these coordinates to resize the div.

var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());

var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

// Resize the image's div to fit the indicated dimensions.

var div = this.div_;

div.style.left = sw.x + 'px';

div.style.top = ne.y + 'px';

div.style.width = (ne.x - sw.x) + 'px';

div.style.height = (sw.y - ne.y) + 'px';

删除自定義覆寫

我們還添加了一種onRemove()方法，可以從地圖上幹淨地删除疊加層。

// The onRemove() method will be called automatically from the API if

// we ever set the overlay's map property to 'null'.

USGSOverlay.prototype.onRemove = function() {

this.div_.parentNode.removeChild(this.div_);

隐藏和顯示自定義疊加層

如果您希望隐藏或顯示疊加層，而不是簡單地建立或删除它，則可以實作自己的hide()和 show()方法來調整疊加層的可見性。另外，您可以将疊加層與地圖的DOM分離，盡管此操作的成本稍高。請注意，如果您随後将疊加層重新附加到地圖的DOM，它将重新調用疊加層的onAdd()方法。

以下示例 為疊加層的原型添加hide()和show()方法，以切換容器的可見性

。此外，我們添加了一種 toggleDOM()方法，用于将疊加層附加到地圖或從地圖上分離。

// Set the visibility to 'hidden' or 'visible'.

USGSOverlay.prototype.hide = function() {

if (this.div_) {

// The visibility property must be a string enclosed in quotes.
this.div_.style.visibility = 'hidden';           

USGSOverlay.prototype.show = function() {

this.div_.style.visibility = 'visible';           

USGSOverlay.prototype.toggle = function() {

if (this.div_.style.visibility === 'hidden') {
  this.show();
} else {
  this.hide();
}           

// Detach the map from the DOM via toggleDOM().

// Note that if we later reattach the map, it will be visible again,

// because the containing

is recreated in the overlay's onAdd() method.

USGSOverlay.prototype.toggleDOM = function() {

if (this.getMap()) {

// Note: setMap(null) calls OverlayView.onRemove()
this.setMap(null);           

} else {

this.setMap(this.map_);           

注意使用者界面：

<div id="floating-panel">
  <input type="button" value="Toggle visibility" onclick="overlay.toggle();"></input>
  <input type="button" value="Toggle DOM attachment" onclick="overlay.toggleDOM();"></input>
</div>
           

檢視示例。