Google 地图 API：如何在标记下嵌入 URL link 并在单击时打开页面

Question

我创建了 google 带有标记的地图。标记从 mysql 数据库中获取信息。我有 id、name、address、lat、lng、type 和 url。在 URL 中，我在餐厅放置了一个 link 并希望它在我单击标记时打开。但是，当我单击标记时，页面正在更改，但它会转到一个空白页面，上面写着 'The requested URL /undefined was not found on this server.' 如果有人可以帮我看看我哪里出错了，我们将不胜感激。这是我的 HTML 代码：

<script>
  var customLabel = {
    restaurant: {
      label: 'R'
    },
    bar: {
      label: 'B'
    }
  };

    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(51.8980, -8.4737),
      zoom: 16
    });
    var infoWindow = new google.maps.InfoWindow;

      downloadUrl('locator.php', function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function(markerElem) {
          var id = markerElem.getAttribute('id');
          var name = markerElem.getAttribute('name');
          var address = markerElem.getAttribute('address');
          var type = markerElem.getAttribute('type');
          var url = markerElem.getAttribute('url');
          var point = new google.maps.LatLng(
              parseFloat(markerElem.getAttribute('lat')),
              parseFloat(markerElem.getAttribute('lng')));

          var infowincontent = document.createElement('div');
          var strong = document.createElement('strong');
          strong.textContent = name
          infowincontent.appendChild(strong);
          infowincontent.appendChild(document.createElement('br'));

          var text = document.createElement('text');
          text.textContent = address
          infowincontent.appendChild(text)

          var icon = customLabel[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            label: icon.label

          });
          marker.addListener('click', function() {      
            infoWindow.setContent(infowincontent);
            infoWindow.open(map, marker);
            window.location.href = this.url;

          });
        });
      });
    }


  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 1

this.url 未定义。您永远不会在代码中设置它。

将其添加到 MarkerOptions 对象：

var marker = new google.maps.Marker({
  map: map,
  position: point,
  label: icon.label,
  url: url
});
marker.addListener('click', function() {      
  infoWindow.setContent(infowincontent);
  infoWindow.open(map, marker);
  console.log("marker click, this.url="+this.url);
  if (!!this.url) {
    window.location.href = this.url;
  }
});

Google 地图 API：如何在标记下嵌入 URL link 并在单击时打开页面

Google maps API: how to embed a URL link under a marker and open the page when clicked

mysql

dom

google-maps

google-maps-markers