Google地圖官方API-在地圖上繪圖（自定義形狀）

形狀

您可以向地圖添加各種形狀。形狀是地圖上的一個對象，與緯度/經度坐标相關聯。可以使用以下形狀： 線，多邊形， 圓形和矩形。您還可以配置形狀，以便使用者可以編輯或拖動它們。

折線

要在地圖上畫一條線，請使用多段線。的 類定義在地圖上連接配接線段的線性疊加。甲對象由一個陣列的 位置，并産生一系列的連接配接以有序序列的那些位置的線段。 PolylinePolylineLatLng

添加折線

該Polyline構造函數采用一組 PolylineOptions指定LatLng 的線的坐标和一組樣式來調整折線的視覺行為。

Polyline對象在地圖上繪制為一系列直線段。您可以PolylineOptions在構造線條時為線條的筆觸指定自定義顔色，粗細和不透明度，也可以在構造之後更改這些屬性。折線支援以下筆觸樣式：

strokeColor指定格式的十六進制HTML顔色 "#FFFFFF"。本Polyline類不支援命名的顔色。

strokeOpacity在0.0和之間指定一個數值 ，1.0以确定線條顔色的不透明度。預設值為1.0。

strokeWeight 指定線條的寬度（以像素為機關）。

折線的editable屬性指定使用者是否可以編輯形狀。請參閱 下面的使用者可編輯形狀。同樣，您可以設定draggable屬性以允許使用者拖動線。

// This example creates a 2-pixel-wide red polyline showing the path of

// the first trans-Pacific flight between Oakland, CA, and Brisbane,

// Australia which was made by Charles Kingsford Smith.

function initMap() {

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

zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: 'terrain'           

});

var flightPlanCoordinates = [

{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}           

];

var flightPath = new google.maps.Polyline({

path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2           

flightPath.setMap(map);

}

檢視示例。

删除折線

要從地圖中删除折線，請調用作為參數setMap()傳遞的方法null。在下面的示例中， flightPath是一個折線對象：

flightPath.setMap(null);

請注意，上述方法不會删除折線。它隻是從地圖上删除折線。相反，如果您希望删除折線，則應将其從地圖上删除，然後将折線本身設定為null。

檢查折線

一條折線将一系列坐标指定為LatLng對象數組 。這些坐标确定線的路徑。要檢索坐标，請調用getPath()，這将傳回type數組MVCArray。您可以使用以下操作來操縱和檢查陣列：

getAt()傳回LatLng給定的從零開始的索引值。

insertAt()LatLng 在給定的從零開始的索引值處插入一個傳遞。請注意，該索引值處的所有現有坐标都将向前移動。

removeAt()删除LatLng給定的從零開始的索引值。

注意：您不能使用文法簡單地檢索數組的第i個元素 mvcArray[i]。您必須使用 mvcArray.getAt(i)。

// This example creates an interactive map which constructs a polyline based on

// user clicks. Note that the polyline only appears once its path property

// contains two LatLng coordinates.

var poly;

var map;

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

zoom: 7,
center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.           

poly = new google.maps.Polyline({

strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3           

poly.setMap(map);

// Add a listener for the click event

map.addListener('click', addLatLng);

// Handles click events on a map, and adds a new point to the Polyline.

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類，您可以對地圖上折線的外觀和感覺進行大量控制。見符号有關的資訊箭頭， 虛線， 自定義符号 和動畫符号。

多邊形

多邊形表示由閉合路徑（或循環）包圍的區域，該閉合路徑由一系列坐标定義。 對象與對象相似，因為它們由一系列有序序列的坐标組成。用描邊和填充繪制多邊形。您可以為多邊形的邊緣（筆觸）定義自定義顔色，權重和不透明度，為封閉區域（填充）定義自定義顔色和不透明度。顔色應以十六進制HTML格式表示。不支援顔色名稱。 PolygonPolyline

Polygon 對象可以描述複雜的形狀，包括：

由一個多邊形定義的多個非連續區域。

帶有孔的區域。

一個或多個區域的交叉點。

要定義複雜的形狀，請使用具有多個路徑的多邊形。

注意： “資料”層提供了一種繪制多邊形的簡單方法。它可以為您處理多邊形纏繞，進而更容易繪制帶有孔的多邊形。請參閱資料層的 文檔。

添加多邊形

由于多邊形區域可能包含多個單獨的路徑，是以 Polygon對象的paths屬性指定了一個數組數組，每個數組類型都是type MVCArray。每個數組定義一個單獨的有序LatLng坐标序列。

對于僅包含一條路徑的簡單多邊形，您可以Polygon使用單個LatLng坐标數組 構造一個。将Maps JavaScript API存儲在paths屬性中時，構造後會将其轉換為數組數組。API為getPath()包含一條路徑的多邊形提供了一種簡單的 方法。

注意：如果以這種方式構造一個簡單的多邊形，您仍然需要通過将路徑作為操縱從多邊形中檢索值MVCArray。

多邊形的editable屬性指定使用者是否可以編輯形狀。請參閱下面的使用者可編輯形狀。同樣，您可以設定draggable屬性以允許使用者 拖動shape。

// This example creates a simple polygon representing the Bermuda Triangle.

zoom: 5,
center: {lat: 24.886, lng: -70.268},
mapTypeId: 'terrain'           

// Define the LatLng coordinates for the polygon's path.

var triangleCoords = [

{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}           

// Construct the polygon.

var bermudaTriangle = new google.maps.Polygon({

paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35           

bermudaTriangle.setMap(map);

多邊形自動補全

在Polygon上面的例子包括四組的 LatLng坐标，但通知的是，第一和最後一個集定義相同的位置，進而完成循環。但是，實際上，由于多邊形定義了封閉區域，是以您無需指定最後一組坐标。Maps JavaScript API會通過繪制筆觸将任意給定路徑的最後一個位置連接配接回第一個位置來自動完成多邊形。

以下示例與上一個示例相同，但LatLng省略了最後一個： view example。

删除多邊形

要從地圖中删除多邊形，請調用作為參數setMap()傳遞的方法null。在以下示例中， bermudaTriangle是一個多邊形對象：

bermudaTriangle.setMap(null);

請注意，上述方法不會删除多邊形。它隻是從地圖上删除多邊形。相反，如果您要删除多邊形，則應将其從地圖中删除，然後将多邊形本身設定為null。

删除多邊形類似于删除折線。要檢視折線的實際代碼： 檢視示例。

檢查多邊形

多邊形将其坐标系列指定為數組數組，其中每個數組的類型都是MVCArray。每個“葉”數組都是LatLng指定單個路徑的坐标數組。要檢索這些坐标，請調用 Polygon對象的getPaths()方法。由于該數組是一個數組，是以MVCArray您需要使用以下操作來對其進行操作和檢查：

// When the user clicks on the polygon an info window opens, showing

// information about the polygon's coordinates.

var infoWindow;

zoom: 5,
center: {lat: 24.886, lng: -70.268},
mapTypeId: 'terrain'           

// Define the LatLng coordinates for the polygon.

{lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757}           

paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35           

// Add a listener for the click event.

bermudaTriangle.addListener('click', showArrays);

infoWindow = new google.maps.InfoWindow;

/* @this {google.maps.Polygon} /

function showArrays(event) {

// Since this polygon has only one path, we can call getPath() to return the

// MVCArray of LatLngs.

var vertices = this.getPath();

var contentString = '

Bermuda Triangle polygon

' +

'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
  '<br>';
           

// Iterate over the vertices.

for (var i =0; i < vertices.getLength(); i++) {

var xy = vertices.getAt(i);
contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
    xy.lng();           

// Replace the info window's content and position.

infoWindow.setContent(contentString);

infoWindow.setPosition(event.latLng);

infoWindow.open(map);

在多邊形上放一個洞

要在多邊形内建立空白區域，您需要建立兩條路徑，一條在另一條路徑内。要建立孔，定義内部路徑的坐标必須與定義外部路徑的坐标相反。例如，如果外部路徑的坐标為順時針方向，則内部路徑必須為逆時針方向。

注意： “資料”層可為您處理内部和外部路徑的順序，進而更容易繪制帶有孔的多邊形。請參閱資料層的 文檔。

下面的示例繪制具有兩條路徑的多邊形，内部路徑的纏繞方向與外部路徑相反。

// This example creates a triangular polygon with a hole in it.

zoom: 5,
center: {lat: 24.886, lng: -70.268},           

// Define the LatLng coordinates for the polygon's outer path.

var outerCoords = [

{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757}           

// Define the LatLng coordinates for the polygon's inner path.

// Note that the points forming the inner path are wound in the

// opposite direction to those in the outer path, to form the hole.

var innerCoords = [

{lat: 28.745, lng: -70.579},
{lat: 29.570, lng: -67.514},
{lat: 27.339, lng: -66.668}           

// Construct the polygon, including both paths.

paths: [outerCoords, innerCoords],
strokeColor: '#FFC107',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FFC107',
fillOpacity: 0.35           

長方形

除了通用Polygon類之外，Google Maps JavaScript API還包括一個用于對象的特定類 ，以簡化其構造。 Rectangle

添加一個矩形

A Rectangle與a相似Polygon，您可以為矩形的邊緣（筆觸）定義自定義顔色，粗細和不透明度，為矩形内的區域（填充）定義自定義顔色和不透明度。顔色應以十六進制數字HTML樣式表示。

不像Polygon，你不定義paths 為一個Rectangle。相反，矩形具有bounds 通過為矩形指定a 來定義其形狀的屬性 。 google.maps.LatLngBounds

矩形的editable屬性指定使用者是否可以編輯形狀。請參閱下面的使用者可編輯形狀。同樣，您可以設定draggable屬性以允許使用者拖動矩形。

// This example adds a red rectangle to a map.

zoom: 11,
center: {lat: 33.678, lng: -116.243},
mapTypeId: 'terrain'           

var rectangle = new google.maps.Rectangle({

strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
  north: 33.685,
  south: 33.671,
  east: -116.234,
  west: -116.251
}           

每次使用者更改地圖縮放時，以下代碼都會建立一個矩形。矩形的大小由視口确定。

// This example creates a rectangle based on the viewport

// on any 'zoom-changed' event.

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

zoom: 11,
center: {lat: 40.748520, lng: -73.981687},
mapTypeId: 'terrain'           

var rectangle = new google.maps.Rectangle();

map.addListener('zoom_changed', function() {

// Get the current bounds, which reflect the bounds before the zoom.
rectangle.setOptions({
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  map: map,
  bounds: map.getBounds()
});           

删除矩形

要從地圖中删除矩形，請調用作為參數setMap()傳遞的方法null。

rectangle.setMap(null);

請注意，上述方法不會删除矩形。它隻是從地圖上删除矩形。如果您想删除矩形，則應将其從地圖上删除，然後将矩形本身設定為null。

删除矩形類似于删除折線。要檢視折線的實際代碼： 檢視示例。

界

除了通用Polygon類之外，Google Maps JavaScript API還包括一個用于對象的特定類 ，以簡化其構造。 Circle

添加圈子

A Circle與a相似Polygon，您可以為圓的邊緣（筆觸）定義自定義顔色，粗細和不透明度，為圓内的區域（填充）定義自定義顔色和不透明度。顔色應以十六進制數字HTML樣式表示。

不像Polygon，你不定義paths 為一個Circle。取而代之的是，圓具有兩個附加屬性來定義其形狀：

center指定google.maps.LatLng 圓心的。

radius 以米為機關指定圓的半徑。

圓的editable屬性指定使用者是否可以編輯形狀。請參閱下面的使用者可編輯形狀。同樣，您可以設定draggable屬性以允許使用者拖動圓圈。

// This example creates circles on the map, representing populations in North

// America.

// First, create an object containing LatLng and population for each city.

var citymap = {

chicago: {

center: {lat: 41.878, lng: -87.629},
population: 2714856           

},

newyork: {

center: {lat: 40.714, lng: -74.005},
population: 8405837           

losangeles: {

center: {lat: 34.052, lng: -118.243},
population: 3857799           

vancouver: {

center: {lat: 49.25, lng: -123.1},
population: 603502           

};

// Create the map.

zoom: 4,
center: {lat: 37.090, lng: -95.712},
mapTypeId: 'terrain'           

// Construct the circle for each value in citymap.

// Note: We scale the area of the circle based on the population.

for (var city in citymap) {

// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  map: map,
  center: citymap[city].center,
  radius: Math.sqrt(citymap[city].population) * 100
});           

删除圈子

要從地圖上删除一個圓，請調用作為參數setMap()傳遞的方法null。

circle.setMap(null);

請注意，上述方法不會删除圓圈。它隻是将圓從地圖上删除。相反，如果您希望删除該圓，則應将其從地圖上删除，然後将圓本身設定為null。

删除圓類似于删除多段線。要檢視折線的實際代碼： 檢視示例。

使用者可編輯和可拖動的形狀

使形狀可編輯可為形狀添加搖桿，人們可以使用這些搖桿直接在地圖上重新定位，改變形狀和調整形狀。您還可以将形狀設定為可拖動，以便人們可以将其移動到地圖上的其他位置。

使用者對對象所做的更改不會在會話之間保留。如果要儲存使用者的編輯，則必須自己捕獲和存儲資訊。

使形狀可編輯

通過将形狀的選項設定editable為true，可以将任何形狀（折線，多邊形，圓形和矩形）設定為使用者可編輯的形狀。

var bounds = {

north: 44.599,

south: 44.490,

east: -78.443,

west: -78.649

// Define a rectangle and set its editable property to true.

bounds: bounds,

editable: true

使形狀可拖動

預設情況下，在地圖上繪制的形狀将固定在位置上。要允許使用者将形狀拖到地圖上的其他位置，draggable請true在形狀選項中将設定 為。

var redCoords = [

{lat: 25.774, lng: -80.190},

{lat: 18.466, lng: -66.118},

{lat: 32.321, lng: -64.757}

// Construct a draggable red triangle with geodesic set to true.

new google.maps.Polygon({

map: map,

paths: redCoords,

strokeColor: '#FF0000',

strokeOpacity: 0.8,

strokeWeight: 2,

fillColor: '#FF0000',

fillOpacity: 0.35,

draggable: true,

geodesic: true

啟用在多邊形或折線上拖動時，還應考慮通過将其geodesic 屬性設定為來使多邊形或折線成為測地線true。

測地線多邊形在移動時将保留其真實的地理形狀，進而導緻該多邊形在墨卡托投影中向北或向南移動時看起來變形。非大地多邊形将始終在螢幕上保留其初始外觀。

在測地折線中，折線的線段被繪制為地球表面上兩個點之間的最短路徑，并假設地球是一個球體，而不是墨卡托投影上的直線。

有關坐标系的更多資訊，請參閱地圖和圖塊坐标指南 。

下圖顯示了兩個大小和尺寸大緻相同的三角形。紅色三角形的geodesic屬性設定為 true。注意其形狀向北移動時如何變化。

收聽編輯活動

編輯形狀後，編輯完成時會觸發一個事件。這些事件在下面列出。

形狀 大事記

圈 radius_changed

center_changed

多邊形 insert_at

remove_at

set_at

必須在多邊形的路徑上設定偵聽器。如果多邊形具有多個路徑，則必須在每個路徑上設定一個偵聽器。

折線 insert_at

必須在折線的路徑上設定偵聽器。

長方形 bounds_changed

一些有用的代碼段：

google.maps.event.addListener(circle, 'radius_changed', function() {

console.log(circle.getRadius());

google.maps.event.addListener(outerPath, 'set_at', function() {

console.log('Vertex moved on outer path.');

google.maps.event.addListener(innerPath, 'insert_at', function() {

console.log('Vertex removed from inner path.');

google.maps.event.addListener(rectangle, 'bounds_changed', function() {

console.log('Bounds changed.');

請參見處理矩形上的編輯事件的示例： view example。

聽拖動事件

拖動形狀時，在拖動動作的開始和結束以及拖動期間會觸發事件。折線，多邊形，圓形和矩形會觸發以下事件。

事件 描述

dragstart 當使用者開始拖動形狀時觸發。

drag 使用者拖動形狀時反複觸發。

dragend 當使用者停止拖動形狀時觸發。

有關處理事件的更多資訊，請參閱有關事件的 文檔。