在Google地图标记的信息窗口中显示链接

时间:2016-02-19 08:47:34

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

我正在一个虚构的活动管理网站上工作。在这个网站上,我从我的数据库中获取信息,使用XML将lat和long值输入谷歌地图,以便在世界各地创建各种标记。

创建标记的代码:

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

当您点击任何标记时,会有一点“信息”信息。将弹出说明事件名称和事件系列。

我可以在窗口底部而不是test添加html链接吗?我想做的是使它成为使用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页面。这可能吗?

2 个答案:

答案 0 :(得分:0)

对于普通的,不那么令人兴奋的信息面板,您可以像现在一样使用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

答案 1 :(得分:0)

可能会这样尝试。

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