我正在一个虚构的活动管理网站上工作。在这个网站上,我从我的数据库中获取信息,使用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页面。这可能吗?
答案 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>";