2015-06-07 34 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中的列表。