摘要：谷歌地圖形狀官網(wǎng)簡(jiǎn)介您可以向地圖添加各種形狀。移除園如需移除地圖中的圓，請(qǐng)調(diào)用方法，并傳遞作為其自變量。將形狀設(shè)置為可拖動(dòng)默認(rèn)情況下，在地圖上繪制的形狀位置固定。

最近加班真是累成狗啊，天天10點(diǎn)以后下班。還有其他的事情，總之都是要死要死的感覺(jué)，苦逼的程序員。
谷歌地圖形狀官網(wǎng)：https://developers.google.com...

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

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

1. 添加多段線

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

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

strokeColor 指定 "#FFFFFF" 格式的十六進(jìn)制 HTML 顏色。Polyline 類不支持命名顏色。

strokeOpacity 指定一個(gè)介于 0.0 和 1.0 的數(shù)值，用于確定線顏色的不透明度。默認(rèn)值為 1.0。

strokeWeight 指定線的寬度（單位：像素）。

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

    //此示例創(chuàng)建一個(gè)2-pixel-wide紅色線顯示的路徑威廉的第一次跨越太平洋的飛行，途經(jīng)奧克蘭、CA、布里斯班、澳大利亞。
function 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. 移除多段線

如需移除地圖中的多段線，請(qǐng)調(diào)用 setMap() 方法，并傳遞 null 作為其自變量。在下例中，flightPath 是一個(gè)多段線對(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. 檢查多段線

多段線以 LatLng 對(duì)象數(shù)組形式指定一系列坐標(biāo)。這些坐標(biāo)決定線的路徑。如需檢索這些坐標(biāo)，請(qǐng)調(diào)用 getPath()，后者將返回 MVCArray 類型的數(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. 定制多段線

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

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

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

由單個(gè)多邊形定義的多個(gè)不連續(xù)區(qū)域

帶孔的區(qū)域

一個(gè)或多個(gè)區(qū)域的交集

1. 添加多變形

由于多邊形區(qū)域可能包括幾個(gè)不同路徑，因此 Polygon 對(duì)象的 paths 屬性指定的是數(shù)組的數(shù)組，每個(gè)數(shù)組的類型均為 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 屬性內(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 屬性指定用戶是否可以編輯形狀。請(qǐng)參閱下文的用戶可編輯形狀。同理，您也可以通過(guò)設(shè)置 draggable 屬性來(lái)允許用戶拖動(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ù)組的類型均為 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 泛型類外，Google Maps JavaScript API 還提供了專供 Rectangle 對(duì)象簡(jiǎn)化其結(jié)構(gòu)的類。

1. 添加矩形

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

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

矩形的 editable 屬性指定用戶是否可以編輯形狀。請(qǐng)參閱下文的用戶可編輯形狀。同理，您也可以通過(guò)設(shè)置 draggable 屬性來(lái)允許用戶拖動(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 泛型類外，Google Maps JavaScript API 還提供了專供 Circle 對(duì)象簡(jiǎn)化其結(jié)構(gòu)的類。

1. 添加圓

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

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

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

radius 指定圓的半徑（單位：米）

圓的 editable 屬性指定用戶是否可以編輯形狀。請(qǐng)參閱下文的用戶可編輯形狀。同理，您也可以通過(guò)設(shè)置 draggable 屬性來(lái)允許用戶拖動(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。

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

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

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

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

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

默認(rèn)情況下，在地圖上繪制的形狀位置固定。如需允許用戶將形狀拖動(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ì)于多段線、多邊形、圓和矩形，將會(huì)觸發(fā)下列事件。

如需了解更多關(guān)于處理事件的內(nèi)容，請(qǐng)參閱[有關(guān)事件的文檔][2]。


 


  [1]: https://developers.google.com/maps/documentation/javascript/symbols