Question

我正在尝试根据用户输入更改Google地图的缩放级别。

<script type="text/javascript">

    var map;

    function initMap() {    
    var uluru = {lat: 37.7749, lng: -122.4194};    
    var map = new google.maps.Map(document.getElementById('map'), {    
    zoom: 10,    

       // standard google map javascript

    } //end of initMap() 


    $('#id_zoomlevel').on('change', function() {
       var zoomlevel = $('#id_zoomlevel :selected').attr('value');
       map.setZoom(zoomlevel);
    });

</script>

我遇到以下错误：

(index):679 Uncaught TypeError: Cannot read property 'setZoom' of undefined

如何将现在设置的map变量传递给“ on change”功能？

Answer 1

您要在map函数中声明新的initMap()变量

<script type="text/javascript">

    var map;

    function initMap() {    
    var uluru = {lat: 37.7749, lng: -122.4194};    
    map = new google.maps.Map(document.getElementById('map'), {    
    zoom: 10,    
    . . . . . . standard google map javascript .....


    $('#id_zoomlevel').on('change', function() {
       var zoomlevel = $('#id\_zoomlevel :selected').attr('value');
       map.setZoom(zoomlevel);
    });

</script>

使用全局地图变量而不是局部变量

Answer 2

您的问题是map既是initMap方法的局部变量，又是全局变量。当您在var map方法中执行initMap时，您将创建一个属于map方法的新initMap变量，而不更改外部全局变量{{1} }。因此，它类似于：

map

但是如果您从内部方法中删除var b; function a() { var b = "foo"; // creates a new `b` variable within `a` (and thus nott modifying the outer `b` variable) } a(); console.log(b); // cannot access `b` outside of `a` (similar to `initMap`)，您将改为更改全局变量（而不创建新的局部变量）：

var

因此，您的代码应如下所示：

var b;
function a() {
  b = "foo";
}
a();
console.log(b); // cannot access `b` outside of `a` (similar to `initMap`)

使用用户输入更改Google地图的缩放级别

2 个答案: