2015-06-07 89 views
0

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

我希望你們能幫助我。

回答

1

而不是運行2個查詢來填充列表markers -array僅創建列表,並將標記創建所需的屬性存儲爲列表項的屬性。

initialize迭代列表項並根據已分配給列表項的屬性創建標記,並且還將所需的點擊偵聽器添加到列表項。

好處:

  • 只有一個單一的查詢
  • 需要

當然它也可以做相反的方式沒有全局變量: 創建標記陣列與附加屬性該列表,然後填充initialize中的列表。