[[170684]]

簡(jiǎn)介

您可以向地圖添加各種形狀。形狀是地圖上與某個(gè)緯度/經(jīng)度坐標(biāo)綁定的對(duì)象。可用的形狀如下：線(xiàn)、多邊形、圓和矩形。您還可以將形狀配置為可供用戶(hù)進(jìn)行編輯或拖動(dòng)。

多段線(xiàn)

如需在地圖上繪制線(xiàn)，請(qǐng)使用多段線(xiàn)。 Polyline 類(lèi)在地圖上定義線(xiàn)性相連線(xiàn)段疊層。Polyline 對(duì)象包含一個(gè) LatLng 位置數(shù)組，它創(chuàng)建的一系列線(xiàn)段以有序方式將這些位置連接起來(lái)。

1. 添加多段線(xiàn)

Polyline 構(gòu)造函數(shù)帶有一組用于指定線(xiàn)的 LatLng 坐標(biāo)的 PolylineOptions，以及一組用于調(diào)整多段線(xiàn)視覺(jué)行為的樣式。

Polyline 對(duì)象在地圖上繪制為一系列直線(xiàn)線(xiàn)段。您可以在構(gòu)建線(xiàn)時(shí)在PolylineOptions 內(nèi)指定線(xiàn)描邊的自定義顏色、粗細(xì)和不透明度，也可在構(gòu)建后更改這些屬性。多段線(xiàn)支持下列描邊樣式：

• strokeColor 指定 "#FFFFFF" 格式的十六進(jìn)制 HTML 顏色。Polyline 類(lèi)不支持命名顏色。
• strokeOpacity 指定一個(gè)介于 0.0 和 1.0 的數(shù)值，用于確定線(xiàn)顏色的不透明度。默認(rèn)值為 1.0。
• strokeWeight 指定線(xiàn)的寬度(單位：像素)。
  多段線(xiàn)的 editable 屬性指定用戶(hù)是否可以編輯形狀。請(qǐng)參閱下文的用戶(hù)可編輯形狀。同理，您也可以通過(guò)設(shè)置 draggable 屬性來(lái)允許用戶(hù)拖動(dòng)線(xiàn)。 

//此示例創(chuàng)建一個(gè)2-pixel-wide紅色線(xiàn)顯示的路徑威廉的***次跨越太平洋的飛行，途經(jīng)奧克蘭、CA、布里斯班、澳大利亞。 
unction initMap() { 
 var map = new google.maps.Map(document.getElementById('map'), { 
   zoom: 3, 
   center: {lat: 0, lng: -180}, 
   mapTypeId: google.maps.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); 
    

2. 移除多段線(xiàn)

如需移除地圖中的多段線(xiàn)，請(qǐng)調(diào)用 setMap() 方法，并傳遞 null 作為其自變量。在下例中，flightPath 是一個(gè)多段線(xiàn)對(duì)象：

`flightPath.setMap(null);` 
        // This example adds a UI control allowing users to remove the polyline from the map. 
     
    var flightPath; 
    var map; 
    function initMap() { 
      map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 3, 
        center: {lat: 0, lng: -180}, 
        mapTypeId: google.maps.MapTypeId.TERRAIN 
      }); 
     
      var flightPathCoordinates = [ 
        {lat: 37.772, lng: -122.214}, 
        {lat: 21.291, lng: -157.821}, 
        {lat: -18.142, lng: 178.431}, 
        {lat: -27.467, lng: 153.027} 
      ]; 
     
      flightPath = new google.maps.Polyline({ 
        path: flightPathCoordinates, 
        strokeColor: '#FF0000', 
        strokeOpacity: 1.0, 
        strokeWeight: 2 
      }); 
     
      addLine(); 
    } 
     
    function addLine() { 
      flightPath.setMap(map); 
    } 
     
    function removeLine() { 
      flightPath.setMap(null); 
    }   

3. 檢查多段線(xiàn)

多段線(xiàn)以 LatLng 對(duì)象數(shù)組形式指定一系列坐標(biāo)。這些坐標(biāo)決定線(xiàn)的路徑。如需檢索這些坐標(biāo)，請(qǐng)調(diào)用 getPath()，后者將返回MVCArray 類(lèi)型的數(shù)組。您可以利用下列操作操縱和檢查該數(shù)組：

• getAt() 返回給定以零為起點(diǎn)索引值處的 LatLng
• insertAt() 在給定以零為起點(diǎn)索引值處插入傳遞的 LatLng。請(qǐng)注意，該索引值處的任何現(xiàn)有坐標(biāo)都將前移
• removeAt() 移除給定以零為起點(diǎn)索引值處的 LatLng

注：不能直接利用 mvcArray[i] 語(yǔ)法檢索數(shù)組的第 i 個(gè)元素。您必須使用 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; 
 
function initMap() { 
  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 
  }); 
}   

4. 定制多段線(xiàn)

可以向多段線(xiàn)添加符號(hào)形式的基于矢量的圖像。您可以通過(guò)組合使用符號(hào)和 PolylineOptions 類(lèi)對(duì)地圖上多段線(xiàn)的外觀(guān)進(jìn)行充分的控制。請(qǐng)參閱符號(hào)，了解有關(guān)箭頭、虛線(xiàn)、自定義符號(hào)及動(dòng)畫(huà)符號(hào)的信息。

多邊形

多邊形表示由閉合路徑(或環(huán)路)封閉的區(qū)域，由一系列坐標(biāo)定義。Polygon 對(duì)象與 Polyline 對(duì)象類(lèi)似，因?yàn)樗鼈兌及幌盗杏行虻淖鴺?biāo)。多邊形使用描邊和填充區(qū)繪制。您可以為多邊形邊緣(描邊)定義自定義顏色、粗細(xì)和不透明度，以及為封閉區(qū)域(填充區(qū))定義自定義顏色和不透明度。顏色應(yīng)以十六進(jìn)制 HTML 格式表示。不支持顏色名稱(chēng)。

Polygon 對(duì)象可描述復(fù)雜形狀，其中包括：

• 由單個(gè)多邊形定義的多個(gè)不連續(xù)區(qū)域
  帶孔的區(qū)域
  一個(gè)或多個(gè)區(qū)域的交集

1. 添加多變形

由于多邊形區(qū)域可能包括幾個(gè)不同路徑，因此 Polygon 對(duì)象的 paths 屬性指定的是數(shù)組的數(shù)組，每個(gè)數(shù)組的類(lèi)型均為 MVCArray。每個(gè)數(shù)組定義的都是不同的有序 LatLng 坐標(biāo)序列。

對(duì)于只包括一個(gè)路徑的簡(jiǎn)單多邊形，您可以利用單個(gè) LatLng 坐標(biāo)數(shù)組構(gòu)建 Polygon。構(gòu)建時(shí)，Google Maps JavaScript API 將在于 paths 屬性?xún)?nèi)存儲(chǔ)該簡(jiǎn)單數(shù)組時(shí)將其轉(zhuǎn)換成數(shù)組的數(shù)組。API 為包括一個(gè)路徑的多邊形提供了一個(gè)簡(jiǎn)單的 getPath() 方法。

注：如果您以這種方式構(gòu)建一個(gè)簡(jiǎn)單的多邊形，仍需通過(guò)以 MVCArray 形式操縱路徑來(lái)檢索多邊形的值。

多邊形的 editable 屬性指定用戶(hù)是否可以編輯形狀。請(qǐng)參閱下文的用戶(hù)可編輯形狀。同理，您也可以通過(guò)設(shè)置 draggable 屬性來(lái)允許用戶(hù)拖動(dòng)形狀。

// This example creates a simple polygon representing the Bermuda Triangle. 
function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 5, 
        center: { 
            lat: 24.886, 
            lng: -70.268 
        }, 
        mapTypeId: google.maps.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 坐標(biāo)，但請(qǐng)注意***組坐標(biāo)和***一組坐標(biāo)定義的位置相同，該位置用于完成環(huán)路。但在實(shí)踐中，由于多邊形定義的是封閉區(qū)域，因此您無(wú)需定指定***一組坐標(biāo)。Google Maps JavaScript API 將通過(guò)繪制一筆，將任何給定路徑的***一個(gè)位置連回***個(gè)位置，自動(dòng)完成多邊形。

2. 移除多邊形

如需移除地圖中的多邊形，請(qǐng)調(diào)用 setMap() 方法，并傳遞 null 作為其自變量。在下例中，bermudaTriangle 是一個(gè)多邊形對(duì)象：

bermudaTriangle.setMap(null); 

3. 檢查多邊形

多邊形以數(shù)組的數(shù)組形式指定其坐標(biāo)系列，其中每個(gè)數(shù)組的類(lèi)型均為 MVCArray。每個(gè)“葉”數(shù)組都是一個(gè)指定單個(gè)路徑的 LatLng 坐標(biāo)數(shù)組。如需檢索這些坐標(biāo)，請(qǐng)調(diào)用 Polygon 對(duì)象的 getPaths() 方法。由于該數(shù)組是 MVCArray，您需要利用下列操作操縱和檢查該數(shù)組：

• getAt() 返回給定以零為起點(diǎn)索引值處的 LatLng
• insertAt() 在給定以零為起點(diǎn)索引值處插入傳遞的 LatLng。請(qǐng)注意，該索引值處的任何現(xiàn)有坐標(biāo)都將前移
• removeAt() 移除給定以零為起點(diǎn)索引值處的 LatLng

矩形

除了 Polygon 泛型類(lèi)外，Google Maps JavaScript API 還提供了*** Rectangle 對(duì)象簡(jiǎn)化其結(jié)構(gòu)的類(lèi)。

1. 添加矩形

Rectangle 與 Polygon 類(lèi)似，您也可以為矩形邊緣(描邊)定義自定義顏色、粗細(xì)和不透明度，以及為矩形內(nèi)區(qū)域(填充區(qū))定義自定義顏色和不透明度。顏色應(yīng)以十六進(jìn)制數(shù)值 HTML 樣式表示。

與 Polygon 不同的是，您無(wú)需為 Rectangle 定義 paths。與多邊形不同，矩形具有一個(gè) bounds 屬性，通過(guò)為矩形指定 google.maps.LatLngBounds 來(lái)定義其形狀。

矩形的 editable 屬性指定用戶(hù)是否可以編輯形狀。請(qǐng)參閱下文的用戶(hù)可編輯形狀。同理，您也可以通過(guò)設(shè)置 draggable 屬性來(lái)允許用戶(hù)拖動(dòng)矩形。

// This example adds a red rectangle to a map. 
function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 11, 
        center: { 
            lat: 33.678, 
            lng: -116.243 
        }, 
        mapTypeId: google.maps.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 
        } 
    }); 
}  

2. 移除矩形

如需移除地圖中的矩形，請(qǐng)調(diào)用 setMap() 方法，并傳遞 null 作為其自變量。

rectangle.setMap(null); 

請(qǐng)注意，以上方法不會(huì)刪除矩形，而只是從地圖中移除矩形。如果您實(shí)際上是想刪除矩形，則應(yīng)先將其從地圖中移除，然后將矩形本身設(shè)置為 null。

圓

除了 Polygon 泛型類(lèi)外，Google Maps JavaScript API 還提供了*** Circle 對(duì)象簡(jiǎn)化其結(jié)構(gòu)的類(lèi)。

1. 添加圓

Circle 與 Polygon 類(lèi)似，您也可以為圓的邊緣(描邊)定義自定義顏色、粗細(xì)和不透明度，以及為圓內(nèi)區(qū)域(填充區(qū))定義自定義顏色和不透明度。顏色應(yīng)以十六進(jìn)制數(shù)值 HTML 樣式表示。

與 Polygon 不同的是，您無(wú)需為 Circle 定義 paths。圓具有兩個(gè)額外的形狀定義屬性：

• center 指定圓中心的 google.maps.LatLng
• radius 指定圓的半徑(單位：米)
  圓的 editable 屬性指定用戶(hù)是否可以編輯形狀。請(qǐng)參閱下文的用戶(hù)可編輯形狀。同理，您也可以通過(guò)設(shè)置 draggable 屬性來(lái)允許用戶(hù)拖動(dòng)圓。

// 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 
  } 
}; 
 
function initMap() { 
  // Create the map. 
  var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: {lat: 37.090, lng: -95.712}, 
    mapTypeId: google.maps.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 
    }); 
  } 
}   

2. 移除園

如需移除地圖中的圓，請(qǐng)調(diào)用 setMap() 方法，并傳遞 null 作為其自變量。

circle.setMap(null); 

請(qǐng)注意，以上方法不會(huì)刪除圓，而只是從地圖中移除圓。如果您實(shí)際上是想刪除圓，則應(yīng)先將其從地圖中移除，然后將圓本身設(shè)置為 null。

可由用戶(hù)編輯和拖動(dòng)的形狀

將形狀設(shè)置為可編輯會(huì)給形狀添加手柄，用戶(hù)可以利用手柄直接在地圖上對(duì)形狀進(jìn)行位置調(diào)整、重新塑形和尺寸調(diào)整。您還可以將形狀設(shè)置為可拖動(dòng)，以便用戶(hù)將其移至地圖上的其他地點(diǎn)。

用戶(hù)對(duì)對(duì)象做出的更改無(wú)法跨會(huì)話(huà)存留。如果您想保存用戶(hù)的編輯，必須自行采集和存儲(chǔ)信息。

1. 將形狀設(shè)置為可編輯

可通過(guò)在形狀的選項(xiàng)中將 editable 設(shè)置為 true，將任何形狀(多段線(xiàn)、多邊形、圓和矩形)設(shè)置為可由用戶(hù)編輯。

2. 將形狀設(shè)置為可拖動(dòng)

默認(rèn)情況下，在地圖上繪制的形狀位置固定。如需允許用戶(hù)將形狀拖動(dòng)到地圖上的其他位置，請(qǐng)?jiān)谛螤畹倪x項(xiàng)中將 draggable 設(shè)置為true。

3. 偵聽(tīng)編輯事件

編輯形狀時(shí)，會(huì)在編輯完成時(shí)觸發(fā)事件。下面列出了這些事件。 

一些相關(guān)的代碼段：

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.'); 
});  

4. 偵聽(tīng)拖動(dòng)事件

拖動(dòng)形狀時(shí)，會(huì)在拖動(dòng)操作開(kāi)始和結(jié)束時(shí)以及拖動(dòng)期間觸發(fā)事件。對(duì)于多段線(xiàn)、多邊形、圓和矩形，將會(huì)觸發(fā)下列事件。