使用Google地圖標記更改信息窗口中的數據

Question

我已按照本教程創建自定義Google地圖。 我已經包含了一些其他元素，例如將其鏈接到Wordpress並聚類標記。

除了每個標記的信息窗口中的信息之外，它都很有效。 我似乎無法改變每個內容的信息。 我想通過更改以下行來改變它但沒有任何影響它：

var html = "<b>" + name + "</b> <br/>" + address;

這是工作地圖

我在哪里可以將自己的自定義數據放入窗口？ 此外，如果我可以在窗口上設置風格，那就更好了。

---

似乎群集是問題，主要是本節，我如何獲取html內容並將其放入信息窗口？

function load() {
  var cluster = [];
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(52.375599, -3.471680),
    zoom: 8,
    mapTypeId: 'roadmap'
  });
  var infowindow = new google.maps.InfoWindow();
  var min = .999999;
  var max = 1.000002;

  // Change this depending on the name of your PHP file
  downloadUrl("<?php bloginfo('stylesheet_directory'); ?>/phpsqlajax_genxml.php ", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var type = markers[i].getAttribute("type");

      var offsetLat = markers[i].getAttribute("lat") * (Math.random() * (max - min) + min);
      var offsetLng = markers[i].getAttribute("lng") * (Math.random() * (max - min) + min);

      var point = new google.maps.LatLng(offsetLat, offsetLng);
      var html = "<b>" + name + "</b> <br/>" + address;
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        // infowindow.setContent(markers[i].getAttribute("name"));
                        // infowindow.open(map, marker, html);
                        infowindow.setContent(html); infowindow.open(map, marker);
                    }
                })(marker, i));
      cluster.push(marker);
    }
    var mc = new MarkerClusterer(map,cluster);
  });
}

具體來說，它不是通過群集器放置html內容...至少這實際上是在更改窗口中的數據，只需輸出html內容而不破壞群集器：

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(markers[i].getAttribute("name"));
                        infowindow.open(map, marker, html);
                    }
                })(marker, i));
      cluster.push(marker);

---

到目前為止我最接近的是它，但它顯示了每個標記的相同信息。 它顯示了html內容：

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        // infowindow.setContent(markers[i].getAttribute("name"));
                        // infowindow.open(map, marker, html);
                        infowindow.setContent(html); infowindow.open(map, marker);
                    }
                })(marker, i));
      cluster.push(marker);

Answer 1

簡直不敢相信我沒想到這個!!

它只是在偵聽器中構建字符串的情況。

  // Change this depending on the name of your PHP file
  downloadUrl("<?php bloginfo('stylesheet_directory'); ?>/phpsqlajax_genxml.php ", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var type = markers[i].getAttribute("type");

      var offsetLat = markers[i].getAttribute("lat") * (Math.random() * (max - min) + min);
      var offsetLng = markers[i].getAttribute("lng") * (Math.random() * (max - min) + min);

      var point = new google.maps.LatLng(offsetLat, offsetLng);
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        var name = markers[i].getAttribute("name");
                        var address = markers[i].getAttribute("address");
                        var html = "<b>" + name + "</b> <br/>" + address;
                        infowindow.setContent(html);
                        infowindow.open(map, marker, html);
                        // infowindow.setContent(html);
                        // infowindow.open(map, marker);
                    }
                })(marker, i));
      cluster.push(marker);
    }

Answer 2

如果我正確閱讀它。 您正嘗試在設置標記后設置內容。

這應該是另一種方式。 將設置html的部分移動到將其推送到集群之前。

---

編輯：

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

  var offsetLat = markers[i].getAttribute("lat") * (Math.random() * (max - min) + min);
  var offsetLng = markers[i].getAttribute("lng") * (Math.random() * (max - min) + min);

  var point = new google.maps.LatLng(offsetLat, offsetLng);
  //var html = "<b>" + name + "</b> <br/>" + address;
  var infowindow = new google.maps.InfoWindow({content: "<b>" + name + "</b> <br/>" + address});

  var icon = customIcons[type] || {};
  var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: icon.icon,
    shadow: icon.shadow
  });
  //google.maps.event.addListener(marker, 'click', (function(marker, i) {
  //              return function() {
  //                  infowindow.setContent(markers[i].getAttribute("name"));
  //                  infowindow.open(map, marker, html);
  //              }
  //          })(marker, i));
  google.maps.event.addListener(marker, 'click',  function(marker, i){infowindow.open(map,marker);})(marker, i);

  cluster.push(marker);
}

不確定（標記，i）件。 我假設標記管理器使用它們來保持什么是trakc。 這兩個變化（我注釋掉了你的線並在下面添加了一個）似乎是下一個合乎邏輯的步驟。

Answer 3

我有一個類似的問題，我想出來，改變標記infowindow的內容

    var marker = new MarkerWithLabel({
        id: "costume_ID",/*<---this is the start of the trick*/
        position: new google.maps.LatLng(lat,lon),
        icon: "../images/icon-bla.png",
        map: map,
        title: 'bla',
        labelContent: 'bla,bla,
        labelClass: "labels", 
        labelStyle: {opacity: 1.0}
    })
    google.maps.event.addListener(marker, 'click', (function() {
        return function(){
        infowindow.setContent(infor(this.id));/*<--- here is the trick*/
        infowindow.open(map, this);
        map.setCenter(this.getPosition());
    }});

如果你在變量中有信息，那么設置輸出你想要的任何東西的函數。

    function infor(im){
        return "<div><b>INFOWINDOW</b><br>Date: "+var[im].date+"<br>Sync:  "+var[im].sync+"...bla,bla,bla</div>";
    }/*THIS FUNCTION RETURN THE STING TO SHOW ION THE INFOWINDOW*/

Answer 4

問題出在你的關閉上。 for循環未正確處理您的范圍。 將for循環內部的所有代碼解壓縮到一個單獨的函數中，閉包應該可以工作。