從 Google Maps (V3) 外部打開特定標記的 infoWindow

Question

我似乎無法解決這個問題：

我有一個帶有（很多）標記（公司）的地圖，這些標記來自生成的 XML 文件。 在地圖下方，我想顯示地圖上顯示的所有公司的（非 JavaScript 生成的）列表。 當我單擊列表中的一家公司時，地圖將平移到該特定標記並打開一個信息窗口。 問題是我希望地圖和列表是兩個獨立的東西......

解決這個問題的正確方法是什么？ 謝謝！ 重要的是所有標記信息都是動態的...

function initialize_member_map(lang) {
  var map = new google.maps.Map(document.getElementById("large-map-canvas"), {
    center: new google.maps.LatLng(50.85034, 4.35171),
    zoom: 13,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow;

  downloadUrl("/ajax/member-xml-output.php", function(data) {
  var xml = data.responseXML;
  var markers = xml.documentElement.getElementsByTagName("marker");
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    var company = markers[i].getAttribute("company");
    var address = markers[i].getAttribute("address");
    var type = markers[i].getAttribute("type");
    var uid = markers[i].getAttribute("uid"); // Primary key of company table in MySQL
    var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")),
        parseFloat(markers[i].getAttribute("lng")));
    var html = "<b>" + company + "</b> <br/>" + address;
    bounds.extend(point);    
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      uid: uid // Some experiments, wanted to use this to target specific markers...
    });
    bindInfoWindow(marker, map, infoWindow, html); 
  }        
  map.setCenter(bounds.getCenter());
  map.fitBounds(bounds); 
});
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
    new ActiveXObject('Microsoft.XMLHTTP') :
    new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    } 
  };

  request.open('GET', url, true);
  request.send(null);
}
function doNothing() {}

按照 Michal 的建議，我嘗試了以下操作，但遇到了兩個問題：我的控制台告訴我markers[index].getPosition is not a function並且我列表中的第一項顯示為undefined 。 你能幫忙嗎？

//JavaScript Document
var map;
var markers = new Array();
var company_list;
function initialize_member_map(lang) {
  map = new google.maps.Map(document.getElementById("large-map-canvas"), {
    center: new google.maps.LatLng(50.85034, 4.35171),
    zoom: 13,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("/ajax/member-xml-output.php?country=BE", function(data) {
    var xml = data.responseXML;
    markers = xml.documentElement.getElementsByTagName("marker");
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
      var company = markers[i].getAttribute("company");
      var address = markers[i].getAttribute("address");
      var type = markers[i].getAttribute("type");
      var uid = markers[i].getAttribute("uid");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + company + "</b> <br/>" + address;
      bounds.extend(point); 
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        uid: uid
      });
      bindInfoWindow(marker, map, infoWindow, html); 
      company_list += "<div onclick=scrollToMarker(" + i + ")>"+company+"</div>";
    }       
    map.setCenter(bounds.getCenter());
    map.fitBounds(bounds); 
    //display company data in html
    document.getElementById("company_list").innerHTML = company_list;
  });

}

function scrollToMarker(index) {
    map.panTo(markers[index].getPosition());
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}
function doNothing(){
}

Answer 1

你走在正確的軌道上。 你只需要為你的 Marker 對象創建一個單獨的全局數組，並將所有創建的標記推送到這個數組。 當您將所有公司數據寫出到 html 時，包括一個調用，其中包含在點擊時執行的標記索引。 下面是一個示例代碼。 我使用 JSON 作為我的數據結構來保存公司信息而不是 XML。

 <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps Scroll to Marker</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 900px;height: 600px;"></div> <div id="companies"></div> <script type="text/javascript"> var map; //JSON of company data - equivalent of your XML companies = { "data": [ { "name": "Company 1", "lat": 42.166, "lng": -87.848 }, { "name": "Company 2", "lat": 41.8358, "lng": -87.7128 }, { "name": "Company 3", "lat": 41.463, "lng": -88.870 }, {"name":"Company 4", "lat":41.809, "lng":-87.790} ] } //we will use this to store google map Marker objects var markers=new Array(); function initialize() { var chicago = new google.maps.LatLng(41.875696,-87.624207); var myOptions = { zoom: 9, center: chicago, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); listCompanies(); } function listCompanies() { html = "" //loop through all companies for (i=0;i<companies.data.length;i++) { //get the maker postion lat = companies.data[i].lat lng = companies.data[i].lng //add google maps marker marker = new google.maps.Marker({ map:map, position: new google.maps.LatLng(lat,lng), title: companies.data[i].name }) markers.push(marker); html += "<div onclick=scrollToMarker(" + i + ")>"+companies.data[i].name+"</div>"; } //display company data in html document.getElementById("companies").innerHTML =html; } function scrollToMarker(index) { map.panTo(markers[index].getPosition()); } </script> </body> </html>

好的，我為您添加了另一個解決方案 - 使用您的代碼。 這個使用您的 bindInfWindow 函數來綁定 DOM (HTML) 單擊事件以打開信息窗口並滾動到標記。 請注意，由於您正在動態加載公司，因此在開始將事件綁定到 DOM 之前，保存其名稱和 ID 的 div（或其他一些標簽）必須存在於 DOM 中 - 因此您需要執行的第一個函數是呈現公司的函數HTML（不是地圖初始化）。 請注意，我沒有測試過這個，因為我沒有你的數據。

//you must write out company divs first

<body onload="showCompanies()">



<script>
//JavaScript Document
var map;
//this is your text data
var markers = new Array();


//you need to create your company list first as we will be binding dom events to it so it must exist before marekrs are initialized
function showCompanies() {
 downloadUrl("/ajax/member-xml-output.php?country=BE", function(data) {
    var xml = data.responseXML;
    markers = xml.documentElement.getElementsByTagName("marker");

    for (var i = 0; i < markers.length; i++) {
      var company = markers[i].getAttribute("company");

      markerId = "id_"+i;

      company_list += "<div id="+markerId+">"+company+"</div>";
    }       

    //display company data in html
    document.getElementById("company_list").innerHTML = company_list;

    //now you are ready to initialize map
    initialize_member_map("lang")
  });
}

function initialize_member_map(lang) {
  map = new google.maps.Map(document.getElementById("large-map-canvas"), {
    center: new google.maps.LatLng(50.85034, 4.35171),
    zoom: 13,
    mapTypeId: 'roadmap'
  });




    var xml = data.responseXML;

    var bounds = new google.maps.LatLngBounds();
    //your company data was read in and is ready to be mapped
    for (var i = 0; i < markers.length; i++) {
      var infoWindow = new google.maps.InfoWindow;
      var company = markers[i].getAttribute("company");
      var address = markers[i].getAttribute("address");
      var type = markers[i].getAttribute("type");
      var uid = markers[i].getAttribute("uid");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + company + "</b> <br/>" + address;
      bounds.extend(point); 
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        uid: uid
      });
      //add the new marker object to the gMarkers array

      markerId = "id_"+i;
      bindInfoWindow(marker, map, infoWindow, html,markerId); 

    }       
    map.setCenter(bounds.getCenter());
    map.fitBounds(bounds); 


}

function scrollToMarker(index) {
    map.panTo(markers[index].getPosition());
}

function bindInfoWindow(marker, map, infoWindow, html, markerId) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
  //bind onlcick events to the div or other object in html
  markerObj =  document.getElementById(markerId);
  //you can create DOM event listeners for the map
  google.maps.event.addDomListener(markerObj, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
    map.panTo(marker.getPosition());
  });

}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}
function doNothing(){
}

</script> 

Answer 2

由於我無法刪除此答案，因此我決定添加一些注釋！

如果您的 xml 格式類似於： http : //www.w3schools.com/dom/books.xml

您可以使用以下幾行訪問作者nodeValue。

markers = xml.documentElement.getElementsByTagName("book");

for (var i = 0; i < markers.length; i++) {
  authors = markers[i].getElementsByTagName('author')[0].innerHTML;
}

希望它可以幫助某人:)