在谷歌地图标记的信息窗口中显示链接答案

【问题标题】：Display a link in the info window of google maps marker在谷歌地图标记的信息窗口中显示链接
【发布时间】：2016-05-31 18:27:23
【问题描述】：

我正在开发一个虚构的事件管理网站。在这个站点上，我使用 XML 从我的数据库中获取信息，将纬度和经度值输入谷歌地图，以便在世界各地创建各种标记。

创建标记的代码：

var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("../php/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("eventName");
          var series = markers[i].getAttribute("eventSeries");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("eventLat")),
              parseFloat(markers[i].getAttribute("eventLong")));
          var html = name + "<br>" + series + "<br>" + "test";
          var marker = new google.maps.Marker({
            map: map,
            position: point
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

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

当您单击任何标记时，会弹出一个小的“信息窗口”，说明事件名称和事件系列。

有没有办法让我在窗口底部添加一个 html 链接而不是 test？我想做的是让它成为一个使用 php 生成的 html 链接，类似于：

<?php

$queryEvents = "SELECT * FROM events GROUP BY eventStart DESC";
$resultEvents = $mysqli->query($queryEvents);

while($rowEvents = $resultEvents->fetch_assoc()){
    echo "<tr>";
    echo "<td>{$rowEvents['eventName']}</td>";
    echo "<td><a href=\"../php/viewEvent.php?eventID={$rowEvents['eventID']}\">View</a></t
    d>";
    echo "<td><a href=\"edit.php?eventID={$rowEvents['eventID']}\">Edit</a></td>";
    echo "<td><a href=\"delete.php?eventID={$rowEvents['eventID']}\">Delete</a></td>";
    echo "</tr>";
}
?>

它将采用eventName 值并使用其ID 的post 值来生成另一个显示事件信息的外部php 页面。这可能吗？

【问题讨论】：

标签： javascript php jquery google-maps google-maps-markers

【解决方案1】：

对于一个普通的、不那么令人兴奋的信息面板，您可以像以前一样使用 InfoWindow。但是要使用自定义 html 来增加它的趣味性，最好使用已经可用的 InfoBox 组件。

它像 InfoWindow 一样简单地插入到您的代码中。此处的其他信息：http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/docs/examples.html

<script src="[YOUR PATH]/infobox.js" type="text/javascript"></script>
<script>
    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
    boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

    var myOptions = {
        content: boxText,
        disableAutoPan: false,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(-140, 0),
        zIndex: null,
        boxStyle: { 
            background: "url('tipbox.gif') no-repeat",
            opacity: 0.75,
            width: "280px"
        },
        closeBoxMargin: "10px 2px 2px 2px",
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1),
        isHidden: false,
        pane: "floatPane",
        enableEventPropagation: false
    };

    var ib = new InfoBox(myOptions);
    ib.open(theMap, marker);
</script>

此选项和其他选项也在此处的类似问题中进行了讨论：https://stackoverflow.com/a/9257003/390421

【讨论】：

【解决方案2】：

可以这样尝试。

var html = name + "<br>" + series + "<br>" + "<a href="<?php echo "test.php?";?>"> TEST </a>";

【讨论】：