如何使 infowindow 和 setzoom 都适用于 Google map API v3

Question

首先我应该说我不太了解 javascript 或 Google API V3。无论如何，我一直在尝试包含一个带有标记的谷歌地图，以指示我使用 infowindow 访问过的地方。我在互联网上找到了一个示例，并将其复制到我的页面。然后我尝试添加一个功能以在单击标记时放大到该位置。更改代码后，我设法使缩放工作非常好。但是，信息窗口不会打开。在我使用它时打开之前；

infowindow.setContent(contentString); 
infowindow.open(map,marker);. 

但缩放无法正常工作。改成这个后；

infowindow.setContent(this.html);
infowindow.open(map, this);

缩放效果很好。但是我丢失了信息窗口。谁能看到我如何更改代码以使缩放和信息窗口都工作。如果有人可以帮助我，我会很高兴。我可以使用下面的代码进行调整，还是需要完全重写？提前致谢

<script>
//<![CDATA[
// this variable will collect the html which will eventually be placed in the    side_bar 
var side_bar_html = "";

// arrays to hold copies of the markers and html used by the side_bar 
// because the function closure trick doesnt work there 
var gmarkers = [];
var map = null;

function initialize() {
    // create the map
    var myOptions = {
        zoom: 7,
        center: new google.maps.LatLng(47.516231, 13.550072),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

    google.maps.event.addListener(map, 'click', function () {
        infowindow.close();
    });

    // Add markers to the map
    // add the points 

    var point = new google.maps.LatLng(48.208174, 16.373819);
    var marker = createMarker(point, "Vienna", '<div style="font-size:12px;font-weight:   bold;font-family:segoe ui, Trebuchet MS;">Vienna</div>')

    // put the assembled side_bar_html contents into the side_bar div
    document.getElementById("side_bar").innerHTML = side_bar_html;
}

var infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(150, 100)
});

// This function picks up the click and opens the corresponding info window
function myclick(i) {
    google.maps.event.trigger(gmarkers[i], "click");
}

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(this.html);
        infowindow.open(map, this);
        map.setZoom(10);
        map.setCenter(marker.getPosition());
    });

    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>';
}
</script>

Answer 1

默认情况下，API 将平移地图，以便信息窗口完全可见（如果可能）。

这将通过使用动画来完成，当您设置缩放+中心时，此动画仍在运行，并将覆盖您的设置。

将infowindow的disableAutoPan-选项设置为true以禁用自动平移，它应该可以按预期工作

Answer 2

主要问题是您将代码更改为使用标记的 .html 属性（google.maps.Marker 对象没有 .html 属性，但您可以添加它们）。

修复它的两个选项：

• 使用您的原始代码：

  // A function to create the marker and set up the event window function 
  function createMarker(latlng, name, html) {
      var contentString = html;
      var marker = new google.maps.Marker({
          position: latlng,
          map: map,
          zIndex: Math.round(latlng.lat() * -100000) << 5
      });
  
      google.maps.event.addListener(marker, 'click', function () {
          infowindow.setContent(contentString); 
          infowindow.open(map,marker);
          map.setZoom(10);
          map.setCenter(marker.getPosition());
     });
  
     // save the info we need to use later for the side_bar
     gmarkers.push(marker);
     // add a line to the side_bar html
     side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>';
  }
  

working example

• 将 .html 添加到 google.maps.Marker 并使用this：

  // A function to create the marker and set up the event window function 
  function createMarker(latlng, name, html) {
      var marker = new google.maps.Marker({
          position: latlng,
          map: map,
          html: html,  // <---------------------------------------------- add this to the Marker
          zIndex: Math.round(latlng.lat() * -100000) << 5
      });
  
      google.maps.event.addListener(marker, 'click', function () {
          infowindow.setContent(this.html); 
          infowindow.open(map,this);
          map.setZoom(10);
          map.setCenter(this.getPosition());
     });
  
     // save the info we need to use later for the side_bar
     gmarkers.push(marker);
     // add a line to the side_bar html
     side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>';
  }