Question

我是GMaps API和javascript的初学者，所以对于你来说这应该是一个非常专业的简单问题。我已经开始使用API“玩”了，并想尝试一个简单的事情，但我无法做到！我环顾四周寻找答案，但我没有得到答案。我创建了地图：

<script type="text/javascript">
function initialize() {

    //CREATE THE MAP
    var mapOptions = {
      center: new google.maps.LatLng(-35.8190,-61.9010),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

    //GET THE ZOOM
    var ez = map.getZoom();

    //TRYING TO CHANGE ZOOM FROM EXTERNAL LINK (DOESN'T WORK)
function cambiarZOOM(nro) {
    var newZ = ez + nro;
    map.setZoom(newZ);
    }

}
google.maps.event.addDomListener(window, 'load', initialize);

</script>

现在，HTML：

<html><body onload="initialize()">
<input type="button" onclick="cambiarZOOM(5)" value="CAMBIAR ZOOM">
</body></html>

好吧，现在我正在阅读google.maps.trigger（）;但我没有得到它。我会给你很多答案！谢谢！

Answer 1

您的cambiarZOOM函数是初始化函数的本地函数（它包含在该函数中）。它需要在HTML事件处理程序（如“onclick”）中使用的全局范围（在任何函数声明之外）。您的“map”变量也需要在其中使用全局。

<script type="text/javascript">
var map = null;
function initialize() {

    //CREATE THE MAP
    var mapOptions = {
      center: new google.maps.LatLng(-35.8190,-61.9010),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

function cambiarZOOM(nro) {
    //GET THE ZOOM
    var ez = map.getZoom();
    var newZ = ez + nro;
    map.setZoom(newZ);
    }

</script>

Answer 2

map是initialise()的局部变量 - 其他函数无权访问它，因此在initialise()之外声明它。然后有一个新函数返回地图的当前缩放。

var map;

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-35.8190,-61.9010),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

function getCurentZoom() {
  return map.getZoom();
}

function cambiarZOOM(nro) {
  var newZ = getCurentZoom() + nro;
  map.setZoom(newZ);
}    

google.maps.event.addDomListener(window, 'load', initialize);

Answer 3

您的问题是cambiarZOOM函数和map变量只能在initialize函数的范围内访问。要在onclick事件上使用函数，它必须全局可用（不鼓励这样做），或者在函数处于范围内时必须将函数附加到按钮。

如果您为按钮指定了ID（id='zoomButton'），则可以在初始化函数中附加cambiarZOOM，如下所示：

...
function cambiarZOOM(nro) {
    var newZ = ez + nro;
    map.setZoom(newZ);
    }
}

var button = document.getElementById('zoomButton');
button.onclick = function () { cambiarZOOM(5); };

使用html标记事件更改缩放

3 个答案: