您已全部設定完成!

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

啟用 Google Maps JavaScript API

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

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

最大縮放影像服務

  1. 最大縮放影像
  2. MaxZoom 要求
  3. MaxZoom 回應

總覽

Google Maps API 為地圖類型影像提供各種縮放層級的地圖方塊。例如,大部分道路圖影像都提供 0 到 18 的縮放層級。衛星影像則差異較大,因為這種影像不是繪製出來,而是拍攝的相片。

由於衛星影像不一定都能為偏僻的地點(人口稀少的地區或海洋區域)提供高縮放層級,所以您可能需要預先瞭解指定位置影像的最高縮放層級。MaxZoomService 物件針對 Google 地圖可提供衛星影像的指定位置,提供簡單的介面來探索其最大縮放層級。

MaxZoom 要求

存取 MaxZoomService 是非同步的,因為 Google Maps API 需要呼叫外部伺服器。所以,您需要傳遞「回呼」方法,以在要求完成時執行。這個回呼方法會處理結果。

如果要初始化對 MaxZoomService 的要求,請呼叫 getMaxZoomAtLatLng(),並傳遞 LatLng 的位置,以及要在要求完成時執行的回呼函式。

MaxZoom 回應

getMaxZoomAtLatLng() 執行「回呼」函式時,它會傳遞回來兩個參數:

  • status 包含要求的 MaxZoomStatus
  • zoom 包含縮放層級。如果服務因某些原因而失敗,則不會出現這個值。

status 碼會傳回下列其中一個值:

  • OK 指出服務找到衛星影像的最大縮放層級。
  • ERROR 指出無法處理 MaxZoom 要求。

下列範例顯示東京大都會地區的地圖:按一下地圖上任一處,將會指出該位置的最大縮放層級。(東京周圍的縮放層級通常介於縮放層級 18 到 21 之間。)

var map;
var maxZoomService;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 35.6894, lng: 139.692},
    mapTypeId: 'hybrid'
  });

  infoWindow = new google.maps.InfoWindow();

  maxZoomService = new google.maps.MaxZoomService();

  map.addListener('click', showMaxZoom);
}

function showMaxZoom(e) {
  maxZoomService.getMaxZoomAtLatLng(e.latLng, function(response) {
    if (response.status !== 'OK') {
      infoWindow.setContent('Error in MaxZoomService');
    } else {
      infoWindow.setContent(
          'The maximum zoom at this location is: ' + response.zoom);
    }
    infoWindow.setPosition(e.latLng);
    infoWindow.open(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>
var map;
var maxZoomService;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 35.6894, lng: 139.692},
    mapTypeId: 'hybrid'
  });

  infoWindow = new google.maps.InfoWindow();

  maxZoomService = new google.maps.MaxZoomService();

  map.addListener('click', showMaxZoom);
}

function showMaxZoom(e) {
  maxZoomService.getMaxZoomAtLatLng(e.latLng, function(response) {
    if (response.status !== 'OK') {
      infoWindow.setContent('Error in MaxZoomService');
    } else {
      infoWindow.setContent(
          'The maximum zoom at this location is: ' + response.zoom);
    }
    infoWindow.setPosition(e.latLng);
    infoWindow.open(map);
  });
}

檢視範例 (maxzoom-simple.html)

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

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