當使用帶有jQuery的按鈕更改地圖上的縮放和中心時，為什么Google地圖顯示為灰色而不初始化縮放和中心？

Question

我正在使用Google Map API制作帶有自定義標記和按鈕的地圖，這些標記和按鈕更改了地圖的中心和縮放比例。 我有一個用於map和infoWindow的全局變量。 初始化后，我的地圖在沒有縮放控件的情況下顯示為灰色。
我沒有任何錯誤消息顯示在控制台中。 我有五個按鈕，分別為：亞洲，北美，中東，紐約，新英格蘭。 這些按鈕可以更改地圖的中心和縮放比例。 但我希望地圖從地圖的初始位置開始

var mapOptions= {
    center: new google.maps.LatLng(38.423734,27.142826), 
    zoom: map.setZoom(4)
  };

我使用foreach循環遍歷位置對象來自定義地圖上的標記和infoWindows。 我還具有設置制造商類型的功能。 效果很好。

$(document).ready(function(){

var map, infoWindow;    

---

自定義標記類型的功能

function initMap() {

map = new google.maps.Map(document.getElementById('map'), mapOptions)

var mapOptions = {
    center: new google.maps.LatLng(38.423734,27.142826), 
    zoom: map.setZoom(4)
  };

$("#asia").on('click', function () {
newLocation(37.566535,126.977969,5);
});
$("#northAmerica").on('click', function () {
newLocation(30.902225,-90.659180,4);
});
$("#middleEast").on('click', function () {
newLocation(38.423734,27.142826,4);
});
$("#newYork").on('click', function () {
newLocation(40.753159,-73.98936,12);
});
$("#newEngland").on('click', function () {
newLocation(42.292783,-71.304496,7);
});

'google.maps.event.addDomListener（window，'load'，initMap）;' for循環添加自定義標記后，它是我的initMap函數的一部分。

關閉initMap函數后，仍在$（document）.ready（function（）{中，調用initMap並定義函數newLocation google.maps.event.addDomListener（window，'load'，initMap）;

---

對於自定義標記的每個循環

自定義標記位置和infoWindow內容的對象

function newLocation(newLat,newLng,newZoom) {
map.setCenter({
    lat : newLat,
    lng : newLng,
  }); 
map.setZoom(newZoom)
};

initMap();

});

Answer 1

我收到您發布的initMap函數的Javasscript錯誤： Uncaught TypeError: map.setZoom is not a function此行Uncaught TypeError: map.setZoom is not a function ： zoom: map.setZoom(4)

那應該是： zoom: 4

代碼段：

 function initMap() { var mapOptions = { center: new google.maps.LatLng(38.423734, 27.142826), zoom: 4 }; map = new google.maps.Map(document.getElementById('map'), mapOptions) $("#asia").on('click', function() { newLocation(37.566535, 126.977969, 5); }); $("#northAmerica").on('click', function() { newLocation(30.902225, -90.659180, 4); }); $("#middleEast").on('click', function() { newLocation(38.423734, 27.142826, 4); }); $("#newYork").on('click', function() { newLocation(40.753159, -73.98936, 12); }); $("#newEngland").on('click', function() { newLocation(42.292783, -71.304496, 7); }); } google.maps.event.addDomListener(window, 'load', initMap); function newLocation(newLat, newLng, newZoom) { map.setCenter({ lat: newLat, lng: newLng, }); map.setZoom(newZoom) }; 

 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="asia" value="asia" type="button" /> <input id="northAmerica" value="northAmerica" type="button" /> <input id="middleEast" value="middleEast" type="button" /> <input id="newYork" value="newYork" type="button" /> <input id="newEngland" value="newEngland" type="button" /> <div id="map"></div>