通过单击外部链接寻址谷歌地图以更改setZoom

Question

我花了几个小时尝试使用onClick javascript函数更改Google地图的缩放级别。我认为我的var map在map的初始化函数内部，这就是为什么它不起作用，但我不确定。感谢您的宝贵帮助。

我们走了：

1）我的初始化函数（galeries对应于为标记检索的数据）

  function initialize() {
      var styles = [
        {
          stylers: [
            { hue: "#486FD5" },
            { saturation: 10 },
            { lightness: 20 },
            { gamma: 1.1 }
          ]
        },{
          featureType: "road",
          elementType: "geometry",
          stylers: [
            { lightness: 40 },
            { visibility: "simplified" }
          ]
        },{
          featureType: "road",
          elementType: "labels",
          stylers: [
            { visibility: "off" }
          ]
        }
      ];

      var mapOptions = {
          zoom: 6,
          center: new google.maps.LatLng(46.8,1.7),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          disableDefaultUI: false,
          scrollwheel: false,
          styles: styles
      }

      var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
      setMarkers(map, galeries);
  }

  function setMarkers(map, locations) {
      var image = '/wordpress/wp-content/uploads/logo-25.png';
      for (var i = 0; i < locations.length; i++) {
          var galeries = locations[i];
          var myLatLng = new google.maps.LatLng(galeries[1], galeries[2]);
          var infoWindow = new google.maps.InfoWindow();
          var marker = new google.maps.Marker({
              position: myLatLng,
              map: map,
              icon: image
          });
          (function(i) {
              google.maps.event.addListener(marker, "click", function() {
                  var galeries = locations[i];
                  infoWindow.close();
                  infoWindow.setContent(
                      "<div id='boxcontent'><a href='"+galeries[3]+"'><strong style='color:black'>"+ galeries[0] +"</strong></a><br />"+ galeries[4] +"</div>"
                  );
                  infoWindow.open(map, this);
              });
          })(i);
      }
  }

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

2）使用onClick调用我的函数（所有注释都对应于KO解决方案）：

function zoom() {
    //map_canvas.setCenter(marker.getPosition()); 
    //map.setZoom(map.getZoom() + 1);
    //map.setZoom('3');
    //$('#map_canvas').gmap({'zoom':2});
    //$('#map_canvas').setZoom(3);
    //google.maps.map.setZoom(2);
    //var carte = google.maps.Map(document.getElementById('map-canvas'));
    //carte.setZoom(2);
    //this.map.setZoom(2);
}

3）结果：没有任何反应，在控制台上我得到了：

Uncaught TypeError: Cannot read property 'setZoom' of undefined

Answer 1

如果您将map变量设为全局变量，则可以在HTML点击事件处理程序中访问它。

function zoom() {
    map.setZoom(map.getZoom() + 1);
}

var map; // make global map variable

function initialize() {
  ...
  // initialize the global variable, remove the "var" keyword here
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  setMarkers(map, galeries);
}

working fiddle

工作代码段：

＆＃13;

＆＃13;

function zoom() {
    map.setZoom(map.getZoom() + 1);
}

var map;

function initialize() {
    var styles = [{
        stylers: [{
            hue: "#486FD5"
        }, {
            saturation: 10
        }, {
            lightness: 20
        }, {
            gamma: 1.1
        }]
    }, {
        featureType: "road",
        elementType: "geometry",
        stylers: [{
            lightness: 40
        }, {
            visibility: "simplified"
        }]
    }, {
        featureType: "road",
        elementType: "labels",
        stylers: [{
            visibility: "off"
        }]
    }];

    var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(46.8, 1.7),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: false,
        scrollwheel: false,
        styles: styles
    }

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

    var galeries = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];
    setMarkers(map, galeries);
}

function setMarkers(map, locations) {
    var bounds = new google.maps.LatLngBounds();
    var image = 'http://maps.google.com/mapfiles/ms/icons/blue.png';
    for (var i = 0; i < locations.length; i++) {
        var galeries = locations[i];
        var myLatLng = new google.maps.LatLng(galeries[1], galeries[2]);
        bounds.extend(myLatLng);
        var infoWindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image
        });
        (function (i) {
            google.maps.event.addListener(marker, "click", function () {
                var galeries = locations[i];
                infoWindow.close();
                infoWindow.setContent(
                    "<div id='boxcontent'><a href='" + galeries[3] + "'><strong style='color:black'>" + galeries[0] + "</strong></a><br />" + galeries[4] + "</div>");
                infoWindow.open(map, this);
            });
        })(i);
    }
    map.fitBounds(bounds);
}

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

＆＃13;

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<input type="button" value="zoom" onclick="zoom()" />

＆＃13;

＆＃13;

＆＃13;