Google 地圖 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 之 路線服務

 

疊加層概述

疊加層是地圖上與緯度/經度坐標綁定的對象，會隨您拖動或縮放地圖而移動。疊加層表示的是“添加”到地圖中以標明點、線、區域或對象集合的對象。

Maps API 包含以下幾種疊加層：

• 地圖上的單個位置是使用標記顯示的。標記有時可顯示自定義的圖標圖片，這種情況下標記通常被稱為“圖標”。標記和圖標是 Marker 類型的對象。（有關詳情，請參閱下面的標記和圖標。）
• 地圖上的線是使用折線（表示一系列按順序排列的位置）顯示的。線是 Polyline 類型的對象。（有關詳情，請參閱折線。）
• 地圖上的不規則形狀區域是使用多邊形（類似於折線）顯示的。與折線相同的是，多邊形也是由一系列按順序排列的位置構成的；不同的是，多邊形定義的是封閉區域。（有關詳情，請參閱下面的多邊形。）
• 地圖圖層可使用疊加層地圖類型顯示。您可以通過創建自定義地圖類型來創建自己的圖塊集，自定義地圖類型可取代基本地圖圖塊集，或作為疊加層顯示在現有基本地圖圖塊集之上。（有關詳情，請參閱自定義地圖類型。）
• 信息窗口也是特殊類型的疊加層，用於在指定地圖位置上方的彈出式氣泡框內顯示內容（通常是文字或圖片）。（有關詳情，請參閱信息窗口。）
• 您還可以實現自己的自定義疊加層。這些自定義疊加層可實現 OverlayView 接口。（有關詳情，請參閱自定義疊加層。）

添加疊加層

疊加層通常在構造時添加到地圖中。所有疊加層都會定義構造中所用的 Options 對象，以指定應顯示疊加層的地圖。您也可以使用疊加層的 setMap() 方法向其傳遞要添加疊加層的地圖，從而直接在該地圖上添加疊加層。

 

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 marker = new google.maps.Marker({  
    position: myLatlng,  
    title:"Hello World!"  
});  
  
// To add the marker to the map, call setMap();  
marker.setMap(map);  

 

移除疊加層

 

要從地圖上移除疊加層，請調用疊加層的 setMap() 方法傳遞 null。請注意，調用此方法不會刪除疊加層，而只是將其從地圖上移除。要刪除疊加層，您應當先從地圖上移除該疊加層，然后將其設為 null。

要管理一組疊加層，您應當創建一個數組以存儲這些疊加層。利用該數組，當您需要移除疊加層時，就可以對該數組中的各個疊加層調用 setMap()。（請注意，與 V2 不同，該版本中未提供 clearOverlays() 方法；您需要自行跟蹤疊加層並在不需要時將其從地圖移除。）您可以從地圖移除疊加層並將相應數組的 length 設為 0（此操作會移除對疊加層的所有引用），從而刪除該疊加層。

以下示例會在點擊地圖時將標記放在地圖上，然后將標記放入數組中。疊加層可在稍后清除、顯示或刪除：

var map;  
var markersArray = [];  
  
function initialize() {  
  var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);  
  var mapOptions = {  
    zoom: 12,  
    center: haightAshbury,  
    mapTypeId: google.maps.MapTypeId.TERRAIN  
  };  
  map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  
  
  google.maps.event.addListener(map, 'click', function(event) {  
    addMarker(event.latLng);  
  });  
}  
  
function addMarker(location) {  
  marker = new google.maps.Marker({  
    position: location,  
    map: map  
  });  
  markersArray.push(marker);  
}  
  
// Removes the overlays from the map, but keeps them in the array  
function clearOverlays() {  
  if (markersArray) {  
    for (i in markersArray) {  
      markersArray[i].setMap(null);  
    }  
  }  
}  
  
// Shows any overlays currently in the array  
function showOverlays() {  
  if (markersArray) {  
    for (i in markersArray) {  
      markersArray[i].setMap(map);  
    }  
  }  
}  
  
// Deletes all markers in the array by removing references to them  
function deleteOverlays() {  
  if (markersArray) {  
    for (i in markersArray) {  
      markersArray[i].setMap(null);  
    }  
    markersArray.length = 0;  
  }  
}  

 

符號

Symbol 是基於矢量的圖片，可顯示在 Marker 或 Polyline 對象上。符號是通過路徑（使用 SVG 路徑表示法）和一些用於控制符號顯示方式的選項來定義的。一些預定義符號可通過 SymbolPath 類提供。 path 是唯一必需的屬性，而 Symbol 類支持多種屬性，可讓您自定義顯示方面的設置（例如筆觸、填充顏色和粗細）。

要詳細了解如何在線段上顯示符號或為符號添加動畫效果，請參閱關於折線上的符號的文檔。要詳細了解如何使用符號作為標記圖片，請參閱下面關於矢量圖片的文檔。

Symbol 類支持以下屬性。請注意，顯示在標記和折線上的 Symbol 的行為會略有不同。

• path（必填），表示用於定義符號形狀的路徑。您可以使用 google.maps.SymbolPath 中預定義的某個路徑，也可以使用 SVG 路徑表示法定義自定義路徑。注意：折線上的矢量路徑不得超過 22x22 像素的方形范圍。如果您的路徑中包含超出此范圍的點，那么您必須將 scale 屬性調整為分數值（如 0.2），以使調整后的點處於該方形范圍內。
• anchor，表示符號相對於標記或折線的位置。符號路徑的坐標分別由錨定點的 x 坐標和 y 坐標向左和向上進行轉換。默認情況下，符號錨定在 (0, 0)。表示該位置的坐標系與符號路徑的坐標系相同。
• fillColor，表示符號的填充色。支持所有 CSS3 顏色，擴展命名的顏色除外。對於符號標記，默認顏色為“黑色”。對於折線上的符號，默認顏色為相應折線的筆觸顏色。
• fillOpacity，以 0 到 1 之間的數字表示符號填充的透明度。默認值為 0。
• rotation，以順時針的讀數表示旋轉符號的角度。默認情況下，符號標記的旋轉角度為 0，而折線上的符號按其所在一邊的角度旋轉。設置折線上符號的旋轉會固定符號的旋轉，這樣符號就不會再沿着曲線移動了。
• scale，表示符號大小縮放的數值。對於符號標記，默認值為 1；符號在縮放后可能為任意大小。對於折線上的符號，默認值為折線的筆觸粗細；經過縮放后，符號必須位於 22x22 像素的方形范圍內（以符號的錨定點為中心）。
• strokeColor，表示符號的筆觸顏色。支持所有 CSS3 顏色，擴展命名的顏色除外。對於符號標記，默認顏色為“黑色”。對於折線上的符號，默認顏色為折線的筆觸顏色。
• strokeOpacity，以 0 到 1 之間的數字表示符號筆觸的透明度。對於符號標記，默認值為 1。對於折線上的符號，默認透明度為折線的透明度。
• strokeWeight，表示符號的筆觸粗細。默認值為符號的 scale。

以下示例創建了一個星行符號，填充顏色為淡黃色，邊框為深黃色。

var goldStar = {  
  path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',  
  fillColor: "yellow",  
  fillOpacity: 0.8,  
  scale: 1,  
  strokeColor: "gold",  
  strokeWeight: 14  
};  
  
var marker = new google.maps.Marker({  
  position: new google.maps.LatLng(-25.363, 131.044),  
  icon: goldStar,  
  map: map  
});  

 

預定義路徑

Google Maps JavaScript API 提供了一些內置符號，可在標記或折線上顯示。默認符號包含一個圓形和兩種箭頭。由於折線上符號的方向是固定的，因此向前和向后的箭頭都可以使用。向前是指折線的終點方向。包含的符號如下：

名稱	說明	示例
google.maps.SymbolPath.CIRCLE	圓形。
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW	各邊封閉的向后箭頭。
google.maps.SymbolPath.FORWARD_CLOSED_ARROW	各邊封閉的向前箭頭。
google.maps.SymbolPath.BACKWARD_OPEN_ARROW	一邊開放的向后箭頭。
google.maps.SymbolPath.FORWARD_OPEN_ARROW	一邊開放的向前箭頭。

您可以使用任意默認符號選項修改預定義符號的筆觸或填充。

標記

標記用於標識地圖上的位置。默認情況下，標記會使用標准圖標，不過您可以在標記的構造函數中或者通過對標記調用 setIcon() 來設置一個自定義圖標。google.maps.Marker構造函數采用一個 Marker options 對象常量來指定標記的初始屬性。以下字段尤為重要，且通常應在您構造標記時進行設置：

• position（必填），用於指定可標識標記初始位置的 LatLng。
• map（可選），用於指定要在其上設置標記的 Map 對象。

請注意，您應在 Marker 構造函數內指定要在哪個地圖上添加標記。如果您未指定此參數，就只能創建標記，而無法將其附加到地圖上（或在地圖上顯示）。稍后，您可以調用標記的 setMap() 方法以添加該標記。要移除標記，請調用 setMap() 方法並傳遞 null 作為其參數。

標記為可交互式。例如在默認情況下，標記可接收 'click' 事件，且通常用於在事件監聽器打開信息窗口。將某個標記的 draggable 屬性設為 true 可使該標記在地圖上供用戶修改。

以下示例將一個簡單的標記添加到澳大利亞中心區域的烏魯魯的地圖上：

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 marker = new google.maps.Marker({  
      position: myLatlng,  
      map: map,  
      title:"Hello World!"  
  });  

 

此 Marker 標題將會顯示為工具提示。

如果您不想在標記的構造函數中傳遞任何 Marker options，請在相應構造函數的最后一個參數中傳遞一個空對象 {}。

動畫

您也可以對標記添加動畫效果，以便它們在各種不同的環境中展現動態活動。標記的 animation 屬性（類型為 google.maps.Animation）中指定了用於為標記添加動畫的方法。系統目前支持以下 Animation 值：

• DROP，用於表示標記在首次放置於地圖上時，應當從地圖頂端落到目標位置。動畫將會隨着標記的停止而結束，且 animation 將會還原為 null。通常，此類動畫會在創建 Marker 的過程中進行指定。
• BOUNCE，用於表示標記應在相應的位置上“彈跳”。在您將彈跳標記的 animation 屬性明確設為 null 之前，該標記會不斷彈跳。

您可以對 Marker 對象調用 setAnimation()，以對現有標記添加動畫效果。

以下示例在瑞典斯德哥爾摩市創建了一個采用 DROP 動畫的標記。點擊該標記即可使其在 BOUNCE 動畫和無動畫之間切換：

var stockholm = new google.maps.LatLng(59.32522, 18.07002);  
var parliament = new google.maps.LatLng(59.327383, 18.06747);  
var marker;  
var map;  
  
function initialize() {  
  var mapOptions = {  
    zoom: 13,  
    mapTypeId: google.maps.MapTypeId.ROADMAP,  
    center: stockholm  
  };  
  
  map = new google.maps.Map(document.getElementById("map_canvas"),  
      mapOptions);  
  
  marker = new google.maps.Marker({  
    map:map,  
    draggable:true,  
    animation: google.maps.Animation.DROP,  
    position: parliament  
  });  
  google.maps.event.addListener(marker, 'click', toggleBounce);  
}  
  
function toggleBounce() {  
  
  if (marker.getAnimation() != null) {  
    marker.setAnimation(null);  
  } else {  
    marker.setAnimation(google.maps.Animation.BOUNCE);  
  }  
}  

 

請注意：如果您有很多標記，則不應讓所有標記同時掉落到地圖上。您可以利用 setTimeout()，使用某種模式（類似於以下所示模式）來間隔顯示標記的動畫效果：

function drop() {  
  for (var i =0; i < markerArray.length; i++) {  
    setTimeout(function() {  
      addMarkerMethod();  
    }, i * 200);  
  }  
}  

 

自定義標記圖片

標記可以定義要顯示的圖標，從而取代默認的圖標。定義圖標的同時也需要設置若干可定義標記視覺行為的屬性。

簡單圖標

在最基本的情況下，只需將標記的 icon 屬性設為某張圖片的網址，即可為圖標指定要使用的圖片（而非默認的 Google 地圖圖釘圖標）。在這種情況下，Google Maps API 會自動調整圖標的大小。

在以下示例中，我們會創建一個圖標，用於標示澳大利亞悉尼的邦迪海灘的位置：

 

function initialize() {  
  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 image = 'beachflag.png';  
  var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);  
  var beachMarker = new google.maps.Marker({  
      position: myLatLng,  
      map: map,  
      icon: image  
  });  
}  

 

復雜圖標

 

較為復雜的圖標可用於指定復雜的形狀（表示用戶可點擊的區域）、添加陰影圖片以及指定這些形狀相對於其他疊加層在顯示時應采用的“堆疊順序”。您應將以此方式指定的圖標的 icon 和 shadow 屬性設為 MarkerImage 類型的對象。

陰影圖片通常應該和主圖片成 45 度夾角（向右上方傾斜），並且陰影圖片的左下角應與圖標圖片的左下角對齊。陰影圖片應該采用具有 alpha 透明度的 24 位 PNG 圖片，以便圖片邊界可正確顯示在地圖上。

MarkerImage 對象不僅可定義圖片，還可定義圖標的 size 和 origin（例如，如果您所需的圖片是較大的拼合圖片的一部分），以及應用於定位圖標熱點的 anchor（基於原點）。

以下示例介紹了如何創建復雜的標記，以標識澳大利亞新南威爾士的悉尼附近的海灘。請注意，anchor 應設為 (0,32)，以便與旗桿的基座相對應。

 

function initialize() {  
  var mapOptions = {  
    zoom: 10,  
    center: new google.maps.LatLng(-33.9, 151.2),  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  }  
  var map = new google.maps.Map(document.getElementById("map_canvas"),  
                                mapOptions);  
  
  setMarkers(map, beaches);  
}  
  
/** 
 * Data for the markers consisting of a name, a LatLng and a zIndex for 
 * the order in which these markers should display on top of each 
 * other. 
 */  
var beaches = [  
  ['Bondi Beach', -33.890542, 151.274856, 4],  
  ['Coogee Beach', -33.923036, 151.259052, 5],  
  ['Cronulla Beach', -34.028249, 151.157507, 3],  
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],  
  ['Maroubra Beach', -33.950198, 151.259302, 1]  
];  
  
function setMarkers(map, locations) {  
  // Add markers to the map  
  
  // Marker sizes are expressed as a Size of X,Y  
  // where the origin of the image (0,0) is located  
  // in the top left of the image.  
  
  // Origins, anchor positions and coordinates of the marker  
  // increase in the X direction to the right and in  
  // the Y direction down.  
  var image = new google.maps.MarkerImage('images/beachflag.png',  
      // This marker is 20 pixels wide by 32 pixels tall.  
      new google.maps.Size(20, 32),  
      // The origin for this image is 0,0.  
      new google.maps.Point(0,0),  
      // The anchor for this image is the base of the flagpole at 0,32.  
      new google.maps.Point(0, 32));  
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',  
      // The shadow image is larger in the horizontal dimension  
      // while the position and offset are the same as for the main image.  
      new google.maps.Size(37, 32),  
      new google.maps.Point(0,0),  
      new google.maps.Point(0, 32));  
      // Shapes define the clickable region of the icon.  
      // The type defines an HTML <area> element 'poly' which  
      // traces out a polygon as a series of X,Y points. The final  
      // coordinate closes the poly by connecting to the first  
      // coordinate.  
  var shape = {  
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],  
      type: 'poly'  
  };  
  for (var i = 0; i < locations.length; i++) {  
    var beach = locations[i];  
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);  
    var marker = new google.maps.Marker({  
        position: myLatLng,  
        map: map,  
        shadow: shadow,  
        icon: image,  
        shape: shape,  
        title: beach[0],  
        zIndex: beach[3]  
    });  
  }  
}  

 

矢量圖標

 

標記支持光柵圖片和矢量路徑的顯示，稱為 Symbols。要顯示矢量路徑，請將帶有所需路徑的 Symbol 對象常量傳遞到標記的 icon 屬性。您可以使用google.maps.SymbolPath 中預定義的某個路徑，也可以使用 SVG 路徑表示法定義自定義路徑。

有關 Google Maps JavaScript API 中矢量圖片的詳情，請參閱關於符號的文檔。

以下示例介紹了如何使用某個預定義的矢量路徑創建圖標。有關更詳細的示例，請參閱關於符號的文檔。

 

marker = new google.maps.Marker({  
  position: new google.maps.LatLng(-25.363882, 131.044922),  
  icon: {  
    path: google.maps.SymbolPath.CIRCLE,  
    scale: 10  
  },  
  draggable: true,  
  map: map  
});  

 

折線

 

Polyline 類用於定義地圖上已連接線段的線性疊加層。Polyline 對象包含一組 LatLng 位置，並可繪制一系列線段，以便按順序連接這些位置。

折線選項

Polyline 構造函數采用一組 Polyline options（用於指定線的 LatLng 坐標）和一組樣式（用於調整折線的視覺行為）。

Polyline 就是在地圖上繪制的一系列直線線段。您可以在構造線時所使用的 Polyline options 對象中，為線的筆觸指定自定義顏色、粗細度和透明度，或在構造之后更改這些屬性。折線支持以下筆觸樣式：

• strokeColor，用於指定 "#FFFFFF" 格式的十六進制 HTML 顏色。Polyline 類不支持使用已命名的顏色。
• strokeOpacity，用於指定線的顏色透明度，其分數比例值在 0.0 到 1.0（默認值）之間。
• strokeWeight，用於指定線的筆觸粗細度（以像素為單位）。

此外，折線的 editable 屬性用於定義此形狀是否在地圖上為用戶可修改的。

以下代碼段繪制了一條寬度為 2 像素的紅色折線，以連接威廉·金斯福德·史密斯從美國加利福尼亞州奧克蘭到澳大利亞布里斯班的首次跨太平洋飛行路線。

 

function initialize() {  
  var myLatLng = new google.maps.LatLng(0, -180);  
  var mapOptions = {  
    zoom: 3,  
    center: myLatLng,  
    mapTypeId: google.maps.MapTypeId.TERRAIN  
  };  
  
  var map = new google.maps.Map(document.getElementById("map_canvas"),  
      mapOptions);  
  var flightPlanCoordinates = [  
    new google.maps.LatLng(37.772323, -122.214897),  
    new google.maps.LatLng(21.291982, -157.821856),  
    new google.maps.LatLng(-18.142599, 178.431),  
    new google.maps.LatLng(-27.46758, 153.027892)  
  ];  
  var flightPath = new google.maps.Polyline({  
    path: flightPlanCoordinates,  
    strokeColor: "#FF0000",  
    strokeOpacity: 1.0,  
    strokeWeight: 2  
  });  
  
  flightPath.setMap(map);  
}  

 

折線數組

 

折線用於指定一系列坐標作為一組 LatLng 對象。要檢索這些坐標，請調用 Polyline 的 getPath()，該方法將返回 MVCArray 類型的數組。同樣，您可以使用以下方法來處理和檢查該數組：

• getAt()，用於在給定的索引值（從零開始）處返回 LatLng。
• insertAt()，用於在給定的索引值（從零開始）處插入所傳遞的 LatLng。請注意，該索引值處的所有現有坐標均會向前移動。
• removeAt()，用於在給定的索引值（從零開始）處刪除 LatLng。

請注意：要檢索數組的第 i 個元素，請務必使用語法 mvcArray.getAt(i)，而不是只使用 mvcArray[i]。

以下代碼創建了一張交互式地圖，其中的折線是根據用戶的點擊次數構造的。請注意，只有當折線的 path 屬性包含兩個 LatLng 坐標時，該折線才會顯示。

 

var poly;  
var map;  
  
function initialize() {  
  var chicago = new google.maps.LatLng(41.879535, -87.624333);  
  var mapOptions = {  
    zoom: 7,  
    center: chicago,  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  };  
  
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);  
  
  var polyOptions = {  
    strokeColor: '#000000',  
    strokeOpacity: 1.0,  
    strokeWeight: 3  
  }  
  poly = new google.maps.Polyline(polyOptions);  
  poly.setMap(map);  
  
  // Add a listener for the click event  
  google.maps.event.addListener(map, 'click', addLatLng);  
}  
  
/** 
 * Handles click events on a map, and adds a new point to the Polyline. 
 * @param {MouseEvent} mouseEvent 
 */  
function addLatLng(event) {  
  
  var path = poly.getPath();  
  
  // Because path is an MVCArray, we can simply append a new coordinate  
  // and it will automatically appear  
  path.push(event.latLng);  
  
  // Add a new marker at the new plotted point on the polyline.  
  var marker = new google.maps.Marker({  
    position: event.latLng,  
    title: '#' + path.getLength(),  
    map: map  
  });  
}  

 

折線上的符號

 

您可以采用符號的形式將基於矢量的圖片添加到折線。要在折線上顯示符號，請設置 PolylineOptions 對象的 icons[] 屬性。icons[] 數組采用一個或多個 IconSequence 對象常量，定義如下：

• icon（必填），表示要在線上呈現的圖標。要詳細了解如何自定義符號，請參閱關於符號的文檔。
• offset，表示與要呈現圖標所在的線起點的距離。此距離可表示為線長度的百分比（例如“50%”）或像素（例如“50 像素”）。默認值為“100%”。
• repeat，表示線上連續圖標之間的距離。此距離可表示為線長度的百分比（例如“50%”）或像素（例如“50 像素”）。要停用重復圖標，請將距離指定為“0”。默認值為“0”。

如果您的折線是測地線，那么對於偏移和重復所指定的距離在默認情況下均以米為單位來計算。如果將偏移或重復設為像素值，就會按屏幕上的像素來計算距離。

借助符號與 PolylineOptions 類的組合，您可以對地圖上折線的外觀進行充分的控制。下面是您可以應用的一些自定義示例。

箭頭

 

使用 IconSequence.offset 屬性可對折線的起點或終點添加箭頭。在此示例中，將偏移設為 100% 可在線的終點放置箭頭。

 

var lineCoordinates = [  
  new google.maps.LatLng(22.291, 153.027),  
  new google.maps.LatLng(18.291, 153.027)  
];  
  
var lineSymbol = {  
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW  
};  
  
var line = new google.maps.Polyline({  
  path: lineCoordinates,  
  icons: [{  
    icon: lineSymbol,  
    offset: '100%'  
  }],  
  map: map  
});  

 

虛線

 

您可以將折線的透明度設為 0%，然后按有規律間隔繪制不透明的符號，從而實現虛線效果。

 

var lineCoordinates = [  
  new google.maps.LatLng(22.291, 153.027),  
  new google.maps.LatLng(18.291, 153.027)  
];  
  
var lineSymbol = {  
  path: 'M 0,-1 0,1',  
  strokeOpacity: 1,  
  scale: 4  
};  
  
var line = new google.maps.Polyline({  
  path: lineCoordinates,  
  strokeOpacity: 0,  
  icons: [{  
    icon: lineSymbol,  
    offset: '0',  
    repeat: '20px'  
  }],  
  map: map  
});  

 

自定義路徑

 

自定義符號可讓您向折線添加多種不同的形狀。

 

var lineCoordinates = [  
  new google.maps.LatLng(22.291, 153.027),  
  new google.maps.LatLng(18.291, 153.027)  
];  
  
var symbolOne = {  
  path: 'M -2,0 0,-2 2,0 0,2 z',  
  strokeColor: '#F00',  
  fillColor: '#F00',  
  fillOpacity: 1  
};  
  
var symbolTwo = {  
  path: 'M -2,-2 2,2 M 2,-2 -2,2',  
  strokeColor: '#292',  
  strokeWeight: 4  
};  
  
var symbolThree = {  
  path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',  
  strokeColor: '#00F',  
  rotation: 0  
};  
  
var line = new google.maps.Polyline({  
  path: lineCoordinates,  
  icons: [{  
    icon: symbolOne,  
    offset: '0%'  
    },{  
      icon: symbolTwo,  
      offset: '50%'  
    },{  
      icon: symbolThree,  
      offset: '100%'  
    }  
  ],  
  map: map  
});  

 

為符號添加動畫效果

 

您可以使用 setTimeout() 函數按固定的間隔更改符號的偏移，從而為其添加動畫效果。

var line;  
  
function initialize() {  
  var mapOptions = {  
    center: new google.maps.LatLng(20.291, 153.027),  
    zoom: 6,  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  };  
    
  var map = new google.maps.Map(document.getElementById("map_canvas"),  
      mapOptions);  
        
  var lineCoordinates = [  
    new google.maps.LatLng(22.291, 153.027),  
    new google.maps.LatLng(18.291, 153.027)  
  ];  
  
  var lineSymbol = {  
    path: google.maps.SymbolPath.CIRCLE,  
    scale: 8,  
    strokeColor: '#393'  
  };  
  
  line = new google.maps.Polyline({  
    path: lineCoordinates,  
    icons: [{  
      icon: lineSymbol,  
      offset: '100%'  
    }],  
    map: map  
  });  
}  
  
function animateCircle() {  
    var count = 0;  
    offsetId = window.setInterval(function() {  
      count = (count + 1) % 200;  
  
      var icons = line.get('icons');  
      icons[0].offset = (count / 2) + '%';  
      line.set('icons', icons);  
  }, 20);  
}  

 

多邊形

 

與 Polyline 對象類似，Polygon 對象也是由一系列有序坐標組成的。不過，多邊形不像折線一樣有兩個端點，而是定義閉合區域。與折線類似的是，您可以定義影響多邊形輪廓的筆觸；不同的是，您還可以定義多邊形內的填充區域。

此外，Polygon 還可以展示復雜形狀，其中包括不連續形狀（多個多邊形定義為一個多邊形）、“圓環”（其中的多邊形區域在多邊形內顯示為“島狀”）以及一個或多個多邊形的交叉。因此，單個多邊形可指定多條路徑。

多邊形選項

與折線類似，您可以定義多邊形邊緣（“筆觸”）的自定義顏色、粗細和不透明度，以及封閉區域（“填充”）的自定義顏色和不透明度。顏色應以十六進制數字 HTML 樣式表示。

由於多邊形區域可能包括多條獨立的路徑，因此 Polygon 對象的 paths 屬性可用於指定“一組數組”（其中每個數組都為 MVCArray 類型且分別定義一系列有序的 LatLng 坐標）。

不過，對於僅包含一條路徑的簡單多邊形，為方便起見，您可以使用一組 LatLng 坐標來構造 Polygon。在構造完成並將此簡單數組存儲到 Polygon 的 paths 屬性中后，Google Maps API 會將其轉換為“一組數組”。此外，該 API 還提供了簡單的 getPath() 方法以構造僅包含一條路徑的簡單多邊形。

注意：如果您是用此方式構造多邊形的，那么仍需要將路徑處理為 MVCArray，以便檢索多邊形的相關值。

此外，多邊形的 editable 屬性用於定義此形狀是否在地圖上為用戶可修改的。

以下代碼段創建了一個表示百慕大三角的多邊形：

 

function initialize() {  
  var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);  
  var mapOptions = {  
    zoom: 5,  
    center: myLatLng,  
    mapTypeId: google.maps.MapTypeId.TERRAIN  
  };  
  
  var bermudaTriangle;  
  
  var map = new google.maps.Map(document.getElementById("map_canvas"),  
      mapOptions);  
  
  var triangleCoords = [  
    new google.maps.LatLng(25.774252, -80.190262),  
    new google.maps.LatLng(18.466465, -66.118292),  
    new google.maps.LatLng(32.321384, -64.75737),  
    new google.maps.LatLng(25.774252, -80.190262)  
  ];  
  
  // Construct the polygon  
  // Note that we don't specify an array or arrays, but instead just  
  // a simple array of LatLngs in the paths property  
  bermudaTriangle = new google.maps.Polygon({  
    paths: triangleCoords,  
    strokeColor: "#FF0000",  
    strokeOpacity: 0.8,  
    strokeWeight: 2,  
    fillColor: "#FF0000",  
    fillOpacity: 0.35  
  });  
  
  bermudaTriangle.setMap(map);  
}  

 

多邊形自動完成

 

以上示例中的 Polygon 包含四個坐標，不過請注意，其中第一個坐標和最后一個坐標的位置相同，從而定義了一個環路。不過，實際上由於多邊形定義的就是封閉區域，因此無需定義這最后一個坐標。對於任意給定路徑，Maps API 將通過繪制連接最后一個坐標與第一個坐標的筆觸來自動“封閉”任何多邊形。

下例除了省略最后一個坐標之外，其他均與上例相同。

多邊形數組

多邊形會將其一系列坐標指定為一組數組，其中各數組都是 MVCArray 類型的。每個“子”數組都是一組 LatLng 坐標，用於指定單條路徑。要檢索這些坐標，請調用 Polygon的 getPaths() 方法。由於數組為 MVCArray，因此您需要使用以下方法來處理和檢查該數組：

• getAt()，用於在給定的索引值（從零開始）處返回 LatLng。
• insertAt()，用於在給定的索引值（從零開始）處插入所傳遞的 LatLng。請注意，該索引值處的所有現有坐標均會向前移動。
• removeAt()，用於在給定的索引值（從零開始）處刪除 LatLng。

請注意：要檢索數組的第 i 個元素，請務必使用語法 mvcArray.getAt(i)，而不是只使用 mvcArray[i]。

以下代碼通過顯示多邊形的坐標信息，對多邊形的點擊事件進行了處理：

 

var map;  
var infoWindow;  
  
function initialize() {  
  var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);  
  var mapOptions = {  
    zoom: 5,  
    center: myLatLng,  
    mapTypeId: google.maps.MapTypeId.TERRAIN  
  };  
  
  var bermudaTriangle;  
  
  map = new google.maps.Map(document.getElementById("map_canvas"),  
      mapOptions);  
  
  var triangleCoords = [  
    new google.maps.LatLng(25.774252, -80.190262),  
    new google.maps.LatLng(18.466465, -66.118292),  
    new google.maps.LatLng(32.321384, -64.75737)  
  ];  
  
  bermudaTriangle = new google.maps.Polygon({  
    paths: triangleCoords,  
    strokeColor: "#FF0000",  
    strokeOpacity: 0.8,  
    strokeWeight: 3,  
    fillColor: "#FF0000",  
    fillOpacity: 0.35  
  });  
  
  bermudaTriangle.setMap(map);  
  
  // Add a listener for the click event  
  google.maps.event.addListener(bermudaTriangle, 'click', showArrays);  
  
  infowindow = new google.maps.InfoWindow();  
}  
  
function showArrays(event) {  
  
  // Since this Polygon only has one path, we can call getPath()  
  // to return the MVCArray of LatLngs  
  var vertices = this.getPath();  
  
  var contentString = "<b>Bermuda Triangle Polygon</b><br />";  
  contentString += "Clicked Location: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />";  
  
  // Iterate over the vertices.  
  for (var i =0; i < vertices.length; i++) {  
    var xy = vertices.getAt(i);  
    contentString += "<br />" + "Coordinate: " + i + "<br />" + xy.lat() +"," + xy.lng();  
  }  
  
  // Replace our Info Window's content and position  
  infowindow.setContent(contentString);  
  infowindow.setPosition(event.latLng);  
  
  infowindow.open(map);  
}  

 

圓形和矩形

 

除了普通的 Polygon 類之外，JavaScript Maps API 還包含一些適用於 Circle 和 Rectangle 的特定類（用於簡化其構造）。

圓形

Circle 與 Polygon 類似，您可以自定義圓形邊緣（“筆觸”）的顏色、粗細和透明度，以及封閉區域（“填充”）的顏色和透明度。顏色應以十六進制數字 HTML 樣式表示。

與 Polygon 不同，您不應為 Circle 定義 paths；圓形有兩個用於定義其形狀的其他屬性：

• center，用於指定圓心的 google.maps.LatLng。
• radius，用於指定圓形的半徑（以米為單位）。

此外，圓形的 editable 屬性用於定義此形狀是否在地圖上為用戶可修改的。

以下代碼段創建了用於表示美國人口的圓形：

// Create an object containing LatLng, population.  
var citymap = {};  
citymap['chicago'] = {  
  center: new google.maps.LatLng(41.878113, -87.629798),  
  population: 2842518  
};  
citymap['newyork'] = {  
  center: new google.maps.LatLng(40.714352, -74.005973),  
  population: 8143197  
};  
citymap['losangeles'] = {  
  center: new google.maps.LatLng(34.052234, -118.243684),  
  population: 3844829  
}  
var cityCircle;  
  
function initialize() {  
  var mapOptions = {  
    zoom: 4,  
    center: new google.maps.LatLng(37.09024, -95.712891),  
    mapTypeId: google.maps.MapTypeId.TERRAIN  
  };  
  
  var map = new google.maps.Map(document.getElementById("map_canvas"),  
      mapOptions);  
  
  for (var city in citymap) {  
    // Construct the circle for each value in citymap. We scale population by 20.  
    var populationOptions = {  
      strokeColor: "#FF0000",  
      strokeOpacity: 0.8,  
      strokeWeight: 2,  
      fillColor: "#FF0000",  
      fillOpacity: 0.35,  
      map: map,  
      center: citymap[city].center,  
      radius: citymap[city].population / 20  
    };  
    cityCircle = new google.maps.Circle(populationOptions);  
  }  
}  

 

 

矩形

 

Rectangle 與 Polygon 類似，您可以自定義矩形邊緣（“筆觸”）的顏色、粗細和透明度，以及封閉區域（“填充”）的顏色和透明度。顏色應以十六進制數字 HTML 樣式表示。

與 Polygon 不同，您不應為 Rectangle 定義 paths；矩形還有一個用於定義其形狀的 bounds 屬性：

• bounds，用於指定矩形的 google.maps.LatLngBounds。

此外，矩形的 editable 屬性用於定義此形狀是否在地圖上為用戶可修改的。

以下示例針對任何 'zoom_changed' 事件分別根據前一個視口創建了矩形：

function initialize() {  
  
  var coachella = new google.maps.LatLng(33.6803003, -116.173894);  
  var rectangle;  
  
  var mapOptions = {  
    zoom: 11,  
    center: coachella,  
    mapTypeId: google.maps.MapTypeId.TERRAIN  
  };  
  
  var map = new google.maps.Map(document.getElementById("map_canvas"),  
      mapOptions);  
  
  rectangle = new google.maps.Rectangle();  
  
  google.maps.event.addListener(map, 'zoom_changed', function() {  
  
    // Get the current bounds, which reflect the bounds before the zoom.  
    var rectOptions = {  
      strokeColor: "#FF0000",  
      strokeOpacity: 0.8,  
      strokeWeight: 2,  
      fillColor: "#FF0000",  
      fillOpacity: 0.35,  
      map: map,  
      bounds: map.getBounds()  
    };  
    rectangle.setOptions(rectOptions);  
  });  
}  

 

用戶可修改的形狀

 

您可將任何形狀的疊加層（折線、多邊形、圓形和矩形）設為用戶可修改，方法是在形狀選項中將 editable 設為 true。

要將標記設為可拖動，請在標記選項中將 draggable 設為 true。

var circleOptions = {  
  center: new google.maps.LatLng(-34.397, 150.644),  
  radius: 25000,  
  map: map,  
  editable: true  
};  
var circle = new google.maps.Circle(circleOptions);  

 

將某種形狀的疊加層設為可修改會增加對該形狀的處理，從而允許用戶直接在地圖上對其進行重新定位、形狀調整和/或大小調整。

 

 

用戶在某個會話中針對對象所作出的更改不會適用於其他會話。如果您想要保存針對折線所作出的修改，請務必自行捕獲並存儲相關信息。

修改事件

如果對形狀進行了修改，那么系統會在修改完畢后觸發相關事件。下面列出了這些事件。

形狀	事件
圓形	radius_changed center_changed
多邊形	insert_at remove_at set_at 監聽器必須設置在多邊形的路徑上。如果多邊形有多條路徑，那么每條路徑上都應設置監聽器。
折線	insert_at remove_at set_at 監聽器必須設置在折線的路徑上。
矩形	bounds_changed

google.maps.event.addListener(circle, 'radius_changed', function() {  
  radius = circle.getRadius();  
});  
  
google.maps.event.addListener(outerPath, 'set_at', function() {  
  print('Vertex moved on outer path.');  
});  
  
google.maps.event.addListener(innerPath, 'insert_at', function() {  
  print('Vertex removed from inner path.');  
});