Google Map 形狀顯示

標籤：

 

添加多段線

Polyline 建構函式帶有一組用於指定線的 LatLng 座標的 PolylineOptions，以及一組用於調整多段線視覺行為的樣式。

Polyline 對象在地圖上繪製為一系列直線線段。您可以在構建線時在 PolylineOptions 內指定線描邊的自訂色彩、粗細和不透明度，也可在構建後更改這些屬性。多段線支援下列描邊樣式：

• strokeColor 指定 "#FFFFFF" 格式的十六進位 HTML 顏色。Polyline 類不支援命名顏色。
• strokeOpacity 指定一個介於 0.0 和 1.0 的數值，用於確定線顏色的不透明度。預設值為1.0。
• strokeWeight 指定線的寬度（單位：像素）。

多段線的 editable 屬性指定使用者是否可以編輯形狀。同理，您也可以通過設定 draggable 屬性來允許使用者拖動線。

所有的繪圖都有 editable 屬性和draggable 屬性

移除多段線

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

 

flightPath.setMap(null);

請注意，以上方法不會刪除多段線，而只是從地圖中移除多段線。如果您實際上是想刪除多段線，則應先將其從地圖中移除，然後將多段線本身設定為 null。

檢查多段線

多段線以 LatLng 對象數組形式指定一系列座標。這些座標決定線的路徑。如需檢索這些座標，請調用 getPath()，後者將返回 MVCArray 類型的數組。您可以利用下列操作操縱和檢查該數組：

• getAt() 返回給定以零為起點索引值處的 LatLng。
• insertAt() 在給定以零為起點索引值處插入傳遞的 LatLng。請注意，該索引值處的任何現有座標都將前移。
• removeAt() 移除給定以零為起點索引值處的 LatLng。

注：您不能直接利用 mvcArray[i] 文法檢索數組的第 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
  });
}

查看樣本 (polyline-complex.html)。

定製多段線

您可以向多段線添加符號形式的基於向量的映像。您可以通過組合使用符號和 PolylineOptions 類對地圖上多段線的外觀進行充分的控制。請參閱符號，瞭解有關箭頭、虛線、自訂符號及動畫符號的資訊。

 

其他繪圖都可以根據多線段的使用及方法來使用

 

-----------------------------------------------------華麗分割線（ 以下為執行個體代碼）--------------------------------------------------------------

// 劃折線
var flightPlanCoordinates = [
{lat: 36.075620815001415, lng: 120.43020844459534},
{lat: 36.074025246504746, lng: 120.4285454750061},
{lat: 36.069949462636, lng: 120.43118476867676},
{lat: 36.06604691846644, lng: 120.42285919189453},
{lat: 36.074025246504746, lng: 120.4139757156372},
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: ‘#FF0000‘,
strokeOpacity: 1.0,
strokeWeight: 2
});

flightPath.setMap(map);

var workStart = new google.maps.Marker({
position: flightPlanCoordinates[0],
label: "起",
title: "上班起點",
map: map
});
var workEnd = new google.maps.Marker({
position: flightPlanCoordinates[(flightPlanCoordinates.length-1)],
label: "終", // label 只顯示第一個字元
title: "上班終點",
map: map
});

// 繪製多邊形
var triangleCoords = [
{lat: 36.06602136399105, lng: 120.35249282982409},
{lat: 36.082132409147086, lng: 120.42076576221541},
{lat: 36.10016285436, lng: 120.3873546955059},
{lat: 36.06602136399105, lng: 120.35249282982409},
];

// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: ‘#32CD32‘,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: ‘#3CB371‘,
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);

// 繪製矩形
var rectangle = new google.maps.Rectangle({
draggable: true, // 是否可拖動
editable: true, // 是否可編輯
strokeColor: ‘#FF0000‘,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: ‘#FF0000‘,
fillOpacity: 0.35,
map: map,
bounds: {
north: 36.114595,
south: 36.104595,
east: 120.369731,
west: 120.349731
}
});
// 繪製圓形
var cityCircle = new google.maps.Circle({
draggable: true, // 是否可拖動
editable: false, // 是否可編輯
strokeColor: ‘#FF0000‘,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: ‘#FF0000‘,
fillOpacity: 0.35,
map: map,
center: qingdao,
radius: 600 // 單位米
});

Google Map 形狀顯示