Question

我正在使用Google Maps JavaScript API v3并使用以下代码在JavaScript中绘制初始地图：

<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key={APIKey}"></script>
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(51.507351, -0.127758)
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  } 
</script>

这会将地图精细地绘制到我网页上的“map-canvas”div中。但是，在按钮上单击我想要更改地图上显示的位置，并放大此位置。我已经在Stack上找到了另一个问题的以下函数，但没有任何反应。

function changeMap () {
     map.setCenter(new google.maps.LatLng(-34.397, 150.644));
     map.setZoom(15);
  }

Answer 1

您的地图变量是初始化函数的本地变量。如果您要从HTML访问它，它需要是全球性的;点击＆＃34;事件

// declare global map variable (outside of any functions)
var map = null;
function initialize() {
  var mapOptions = {
  zoom: 8,
  center: new google.maps.LatLng(51.507351, -0.127758)
  };
  // initialize the map variable after the page "load" event fires
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

然后此代码将起作用（并且不会生成javascript错误，指出＆＃34; map＆＃34;未定义）。

function changeMap () {
   map.setCenter(new google.maps.LatLng(-34.397, 150.644));
   map.setZoom(15);
}

通过javascript更改缩放和LatLng（Google Maps JavaScript API v3）

1 个答案: