添加在Google maps API v3中打開信息窗口的鏈接

Question

無法添加將在我的谷歌地圖上居中並打開信息窗口的鏈接。標記及其信息窗口在地圖本身內正常工作。

真正的問題是構建一個對象，我的onclick函數可以正確引用。我的面向對象的Javascript知識不穩定，我只是沒有看到解決方案。

該地圖通過在頁面加載時調用的函數加載，並且我有一個單獨的函數，在頁面內部單擊href時調用。 代碼如下。

function addMap(addressesJSON, id){ 
    var addresses = eval('(' + addressesJSON + ')'); 
    var cenLat = 41.677389; 
    var cenLng = -72.384294; 
    var latLow = 41.4; 
    var lngLow = -72.8; 
    var latHigh = 41.8; 
    var lngHigh = -71.9; 
    if (addresses.length){ 
     for (var i in addresses){ 
      addresses[i].lat = parseFloat(addresses[i].lat); 
      addresses[i].lng = parseFloat(addresses[i].lng); 
      if (i == 0){ 
       latLow = addresses[i].lat; 
       latHigh = addresses[i].lat; 
       lngLow = addresses[i].lng; 
       lngHigh = addresses[i].lng; 
      } else { 
       if (addresses[i].lat < latLow){ 
        latLow = addresses[i].lat; 
       } 
       if (addresses[i].lat > latHigh){ 
        latHigh = addresses[i].lat; 
       } 
       if (addresses[i].lng < lngLow){ 
        lngLow = addresses[i].lng; 
       } 
       if (addresses[i].lng > lngHigh){ 
        lngHigh = addresses[i].lng; 
       } 
      } 
      address = "<span style=\"color: #0000ff\">" + addresses[i].name + "</span><br/>" + addresses[i].address + "<br/>Directions: <a href=\"#\" onClick=\"GPopUp('http://maps.google.com/maps?daddr=" + addresses[i].address + "&f=li&hl=en&ie=UTF8&om=1')\">To</a> - <a href=\"#\" onClick=\"popUp('http://maps.google.com/maps?saddr=" + addresses[i].address + "&f=li&hl=en&ie=UTF8&om=1')\">From</a>"; 
      addresses[i].address = address; 
     } 
     cenLat = (latLow + latHigh)/2; 
     cenLng = (lngLow + lngHigh)/2; 
    } 

    var mapOptions = { 
     center: new google.maps.LatLng(cenLat, cenLng), 
     zoom: 12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    // Display a map on the page 
    var map = new google.maps.Map(document.getElementById(id), mapOptions); 
    var bounds = new google.maps.LatLngBounds(); 
    var infowindow = new google.maps.InfoWindow(); 

    for (var i in addresses){ 
     var letter = addresses[i].letter; 
     var data = addresses[i].address; 
     var myLatlng = new google.maps.LatLng(addresses[i].lat, addresses[i].lng); 

     var latlng = new google.maps.LatLng(addresses[i].lat, addresses[i].lng); 
     bounds.extend(latlng); 

     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title: addresses[i].name, 
      icon: "http://maps.google.com/mapfiles/marker" + letter + ".png" 
     }); 

     (function (marker, data) { 
      google.maps.event.addListener(marker, "click", function() { 
       // Center on marker 
       map.setCenter(marker.getPosition()); 
       // Set the data for the info window 
       infowindow.setContent(data); 
       // show the infowindow 
       infowindow.open(map, marker); 
      }); 
     })(marker, data); 
    } 
    map.fitBounds(bounds); 
} 

而且我想打開相應的infowindow的onclick函數。

function moveCenter(lat, lng, letter){ 
    google.maps.event.trigger(marker[letter], "click"); 
} 

任何有關如何構建標記對象數組的幫助，讓我的moveCenter函數看到它將不勝感激。

Answer 1

看起來像你只需要這一行添加到您的代碼：

markers[letter] = marker; 

，改變你的函數：

function moveCenter(lat, lng, letter){ 
    google.maps.event.trigger(markers[letter], "click"); 
} 

（確保標記陣列是在全球範圍內）

markers = []; 
function addMap(addressesJSON, id){ 
    var addresses = eval('(' + addressesJSON + ')'); 
    var cenLat = 41.677389; 
    var cenLng = -72.384294; 
    var latLow = 41.4; 
    var lngLow = -72.8; 
    var latHigh = 41.8; 
    var lngHigh = -71.9; 
    if (addresses.length){ 
     for (var i in addresses){ 
      addresses[i].lat = parseFloat(addresses[i].lat); 
      addresses[i].lng = parseFloat(addresses[i].lng); 
      if (i == 0){ 
       latLow = addresses[i].lat; 
       latHigh = addresses[i].lat; 
       lngLow = addresses[i].lng; 
       lngHigh = addresses[i].lng; 
      } else { 
       if (addresses[i].lat < latLow){ 
        latLow = addresses[i].lat; 
       } 
       if (addresses[i].lat > latHigh){ 
        latHigh = addresses[i].lat; 
       } 
       if (addresses[i].lng < lngLow){ 
        lngLow = addresses[i].lng; 
       } 
       if (addresses[i].lng > lngHigh){ 
        lngHigh = addresses[i].lng; 
       } 
      } 
      address = "<span style=\"color: #0000ff\">" + addresses[i].name + "</span><br/>" + addresses[i].address + "<br/>Directions: <a href=\"#\" onClick=\"GPopUp('http://maps.google.com/maps?daddr=" + addresses[i].address + "&f=li&hl=en&ie=UTF8&om=1')\">To</a> - <a href=\"#\" onClick=\"popUp('http://maps.google.com/maps?saddr=" + addresses[i].address + "&f=li&hl=en&ie=UTF8&om=1')\">From</a>"; 
      addresses[i].address = address; 
     } 
     cenLat = (latLow + latHigh)/2; 
     cenLng = (lngLow + lngHigh)/2; 
    } 

    var mapOptions = { 
     center: new google.maps.LatLng(cenLat, cenLng), 
     zoom: 12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    // Display a map on the page 
    var map = new google.maps.Map(document.getElementById(id), mapOptions); 
    var bounds = new google.maps.LatLngBounds(); 
    var infowindow = new google.maps.InfoWindow(); 

    for (var i in addresses){ 
     var letter = addresses[i].letter; 
     var data = addresses[i].address; 
     var myLatlng = new google.maps.LatLng(addresses[i].lat, addresses[i].lng); 

     var latlng = new google.maps.LatLng(addresses[i].lat, addresses[i].lng); 
     bounds.extend(latlng); 

     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title: addresses[i].name, 
      icon: "http://maps.google.com/mapfiles/marker" + letter + ".png" 
     }); 
     markers[letter] = marker; 

     (function (marker, data) { 
      google.maps.event.addListener(marker, "click", function() { 
       // Center on marker 
       map.setCenter(marker.getPosition()); 
       // Set the data for the info window 
       infowindow.setContent(data); 
       // show the infowindow 
       infowindow.open(map, marker); 
      }); 
     })(marker, data); 
    } 
    map.fitBounds(bounds); 
}