您已全部設定完成!

若要開始開發,請參閱我們的開發人員文件

啟用 Google Maps JavaScript API

為協助您開始,我們將先引導您使用「Google 開發人員控制台」來執行一些動作:

  1. 建立或選擇專案
  2. 啟用 Google Maps JavaScript API 與相關服務
  3. 建立適當的金鑰
繼續

地面疊加層

  1. 簡介
  2. 新增地面疊加層
  3. 移除地面疊加層

簡介

疊加層為在地圖上與緯度/經度座標連結的物件,因此它們會隨著您拖曳或縮放地圖而移動。如果您要在地圖上放置影像,可以使用 GroundOverlay 物件。

如需其他疊加層類型的詳細資訊,請參閱在地圖上進行繪製

新增地面疊加層

GroundOverlay 的建構函式可指定影像的 URL 和影像的 LatLngBounds 做為參數。影像會在地圖上轉譯、被限制在指定邊界,並遵循地圖的投影。

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 40.740, lng: -74.18}
  });

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 40.740, lng: -74.18}
  });

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(map);
}

檢視範例 (groundoverlay-simple.html)

移除地面疊加層

如果要從地圖移除疊加層,請呼叫該疊加層的 setMap() 方法並傳遞 null。請注意,呼叫此方法並不會刪除疊加層。它只會從地圖移除該疊加層。如果您想要刪除疊加層,便應該先從地圖移除它,然後將疊加層自身設為 null

function removeOverlay() {
  historicalOverlay.setMap(null);
}

檢視範例 (overlay-remove.html)

傳送您對下列選項的寶貴意見...

這個網頁
Google Maps JavaScript API
Google Maps JavaScript API
需要協助嗎?請前往我們的支援網頁