怎么用javascript實現(xiàn)地圖API添加形狀

這篇文章主要講解了“怎么用javascript實現(xiàn)地圖API添加形狀”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用javascript實現(xiàn)地圖API添加形狀”吧！

簡介

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

多段線

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

1. 添加多段線

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

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

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

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

• strokeWeight 指定線的寬度(單位：像素)。    
  多段線的 editable 屬性指定用戶是否可以編輯形狀。請參閱下文的用戶可編輯形狀。同理，您也可以通過設(shè)置 draggable  屬性來允許用戶拖動線。 

//此示例創(chuàng)建一個2-pixel-wide紅色線顯示的路徑威廉的***次跨越太平洋的飛行，途經(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. 移除多段線

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

`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 對象數(shù)組形式指定一系列坐標。這些坐標決定線的路徑。如需檢索這些坐標，請調(diào)用 getPath()，后者將返回MVCArray  類型的數(shù)組。您可以利用下列操作操縱和檢查該數(shù)組：

• getAt() 返回給定以零為起點索引值處的 LatLng

• insertAt() 在給定以零為起點索引值處插入傳遞的 LatLng。請注意，該索引值處的任何現(xiàn)有坐標都將前移

• removeAt() 移除給定以零為起點索引值處的 LatLng

注：不能直接利用 mvcArray[i] 語法檢索數(shù)組的第 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;  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. 定制多段線

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

多邊形

多邊形表示由閉合路徑(或環(huán)路)封閉的區(qū)域，由一系列坐標定義。Polygon 對象與 Polyline  對象類似，因為它們都包含一系列有序的坐標。多邊形使用描邊和填充區(qū)繪制。您可以為多邊形邊緣(描邊)定義自定義顏色、粗細和不透明度，以及為封閉區(qū)域(填充區(qū))定義自定義顏色和不透明度。顏色應(yīng)以十六進制  HTML 格式表示。不支持顏色名稱。

Polygon 對象可描述復雜形狀，其中包括：

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

1. 添加多變形

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

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

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

多邊形的 editable 屬性指定用戶是否可以編輯形狀。請參閱下文的用戶可編輯形狀。同理，您也可以通過設(shè)置 draggable  屬性來允許用戶拖動形狀。

// 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  坐標，但請注意***組坐標和***一組坐標定義的位置相同，該位置用于完成環(huán)路。但在實踐中，由于多邊形定義的是封閉區(qū)域，因此您無需定指定***一組坐標。Google  Maps JavaScript API 將通過繪制一筆，將任何給定路徑的***一個位置連回***個位置，自動完成多邊形。

2. 移除多邊形

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

bermudaTriangle.setMap(null);

3. 檢查多邊形

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

• getAt() 返回給定以零為起點索引值處的 LatLng

• insertAt() 在給定以零為起點索引值處插入傳遞的 LatLng。請注意，該索引值處的任何現(xiàn)有坐標都將前移

• removeAt() 移除給定以零為起點索引值處的 LatLng

矩形

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

1. 添加矩形

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

與 Polygon 不同的是，您無需為 Rectangle 定義 paths。與多邊形不同，矩形具有一個 bounds 屬性，通過為矩形指定  google.maps.LatLngBounds 來定義其形狀。

矩形的 editable 屬性指定用戶是否可以編輯形狀。請參閱下文的用戶可編輯形狀。同理，您也可以通過設(shè)置 draggable  屬性來允許用戶拖動矩形。

// 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. 移除矩形

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

rectangle.setMap(null);

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

圓

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

1. 添加圓

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

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

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

• radius 指定圓的半徑(單位：米)    
  圓的 editable 屬性指定用戶是否可以編輯形狀。請參閱下文的用戶可編輯形狀。同理，您也可以通過設(shè)置 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   } };  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. 移除園

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

circle.setMap(null);

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

可由用戶編輯和拖動的形狀

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

用戶對對象做出的更改無法跨會話存留。如果您想保存用戶的編輯，必須自行采集和存儲信息。

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

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

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

默認情況下，在地圖上繪制的形狀位置固定。如需允許用戶將形狀拖動到地圖上的其他位置，請在形狀的選項中將 draggable 設(shè)置為true。

3. 偵聽編輯事件

編輯形狀時，會在編輯完成時觸發(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. 偵聽拖動事件

拖動形狀時，會在拖動操作開始和結(jié)束時以及拖動期間觸發(fā)事件。對于多段線、多邊形、圓和矩形，將會觸發(fā)下列事件。

感謝各位的閱讀，以上就是“怎么用javascript實現(xiàn)地圖API添加形狀”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對怎么用javascript實現(xiàn)地圖API添加形狀這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！