我正在構建在地圖上顯示事件的網頁。由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>';
}
}
;?>
我希望你們能幫助我。