缩放功能谷歌地图答案

【问题标题】：Zoom function Google maps缩放功能谷歌地图
【发布时间】：2015-12-19 17:27:57
【问题描述】：

我在信息窗口中创建了一个按钮，该按钮需要平移到标记然后放大，但我无法让它工作。下面是我的缩放功能

function Zoom(){
google.maps.event.addListener(marker, 'click', function() { 
    map.panTo(marker.position);
    map.setZoom(18);
});

这个函数创建标记并用下面的 html 填充信息窗口。

function createMarker(latlng, name, woonplaats, prijs, perceelop, woonop, address) {
  var html ="<a href="+address+">"+"<b>"+name+"</b></a> <br/>" 
            + woonplaats +"</br>" + woonop + "/ " + perceelop + "</br>" + "€ " + prijs + 
            "</br><input id='zoombutton' type='button' onclick='Zoom()' value='Zoom in' />" 
  var marker = new google.maps.Marker({
    map: map,
    position: latlng
  });
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
  markers.push(marker);
}

如果我删除 panTo 函数，它会放大，但它不会平移到标记，因此它会在完全不同的地方放大。如果缩放级别为 18 或更高但没有结果，我还尝试使按钮不可见。

任何帮助将不胜感激！

【问题讨论】：

请提供一个Minimal, Complete, Tested and Readable example 来证明该问题。

标签： google-maps google-maps-api-3 google-maps-markers infowindow marker

【解决方案1】：

marker.position 是一个未记录的参数（如果存在）。使用marker.getPosition() 获取标记的位置。

function Zoom(){
  google.maps.event.addListener(marker, 'click', function() { 
    map.panTo(marker.getPosition());
    map.setZoom(18);
  }); 
// ??
}

我的代码出现 javascript 错误：Uncaught ReferenceError: marker is not defined

不确定为什么要在按钮 onclick 函数中向 marker 添加点击监听器
您需要保留对所有标记的引用（假设不止一个）

// in the global scope:
var markers = [];

function Zoom(markerNum) {
  // markerNum is the index of this marker in the markers array
  map.panTo(markers[markerNum].getPosition());
  map.setZoom(18);
}

working fiddle

代码 sn-p：

var map;
var markers = [];
var infoWindow = new google.maps.InfoWindow();

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  createMarker(map.getCenter(), "Palo Alto");
  createMarker({
    lat: 37.42410599999999,
    lng: -122.1660756
  }, "Stanford");
}

function createMarker(latlng, name) {
  var html = name + "</br><input id='zoombutton' type='button' onclick='Zoom(" + markers.length + ")' value='Zoom in' />"
  var marker = new google.maps.Marker({
    map: map,
    position: latlng
  });
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
  markers.push(marker);
}

function Zoom(markerNum) {
  map.panTo(markers[markerNum].getPosition());
  map.setZoom(18);
}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?"></script>
<div id="map_canvas"></div>

【讨论】：