我正在构建在地图上显示事件的网页。由Google地图上的标记代表的事件是可点击的,因此用户可以获得更多信息。到目前为止,这工作正常。从外部访问2D阵列中的Google地图标记
网页上的其他地方还有一个相同事件的列表。我想要的是,用户可以点击“在地图上查看”,这样用户就可以放大地图上的特定事件,并打开infoWindow。
这个主题并不是StackOverflow的新功能,但我发现的现有解决方案似乎不适用于我的代码(或者我只是搞砸了)。我必须找到解决方案,使用阵列,但我没有看到解决方案...
标记和infoWindows的信息通过PHP(注入代码)出来的数据库。信息进入2D阵列。我是一个初学者,所以代码会有点不好意思。
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = { mapTypeId: 'roadmap'};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
<?php
// Some query
?>
// Generate array with markers
var markers = [
<?php
// Get stuff from database
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "['".$row['conname']."', ".$row["gps_long"].",".$row['gps_lat']."],\r\n";
}
}
?>
];
// Generate array for infoWindow
var infoWindowContent = [
<?php
// More stuff from database
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "['blablabla'],";
}
}
?>
];
var infoWindow = new google.maps.InfoWindow(), marker, i;
for(i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
google.maps.event.addListener(map, "click", function(event) {
infoWindow.close();
});
map.fitBounds(bounds);
}
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(5);
google.maps.event.removeListener(boundsListener);
});
}
google.maps.event.addDomListener(window, 'load', initialize)
该列表也是通过PHP在同一时间以相同的方式生成。在某处...
<?php
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo '<p><a href=./?event="'.$row["id"].'">'.$row["eventname"]."</a><br>";
echo $row["date"]."<br>\n";
echo '<a href="#">View on map</a></p><br>';
}
}
;?>
我希望你们能帮助我。