使用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);
    }