如何使infowindow和setzoom適用於谷歌地圖API v3

Question

我應該開始說我對JavaScript或Google API V3不太瞭解。無論如何，我一直在試圖包含帶有標記的谷歌地圖，以指示我使用infowindow訪問過的地方。我在互聯網上找到了一個複製到我的頁面的例子。然後我嘗試添加一個函數來放大點擊標記時的位置。改變代碼後，我設法讓縮放工作非常棒。但是，infowindow不會打開。在我用這個之前它是開放的之前;

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

但是縮放無法正常工作。改成這個之後;

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

縮放工作很好。但我失去了infowindow。任何人都可以看到我可以如何改變代碼，使縮放和infowindow工作。如果有人能幫助我，我會非常高興。我可以使用下面的代碼進行調整，還是需要完整的重寫？感謝提前

<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

的主要問題是，你改變了代碼使用標記的.html屬性（google.maps.Marker對象沒有.html屬性，但可以添加它們）。

2個選項，用於固定它：

• 使用原來的代碼：

  // 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>'; 
  } 
  

Answer 2

默認情況下，API將平移地圖，以便infowindow將完全可見（如果可能）。

這將通過使用動畫完成，當您設置縮放+中心時，此動畫仍在運行，並將覆蓋您的設置。

設置infowindow的disableAutoPan - 選項來true禁用自動平移，它應該按預期工作