从外部

Question

我正在构建一个在地图上显示活动的网页。由Google地图上的标记表示的事件是可点击的，因此用户可以获得其他信息。到目前为止，这工作正常。

网页上的其他地方也有相同事件的列表。我想要的是用户可以点击类似＆＃34;在地图上查看＆＃34;因此，用户可以放大地图上的特定事件，并打开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>';
        }
    }
    ;?>

我希望你们能帮助我。

Answer 1

而不是运行2个查询来填充列表和，markers - 数组只创建列表，并将标记创建所需的属性存储为属性列表项。

在initialize中迭代列表项并根据已分配给列表项的属性创建标记....并将所需的点击监听器添加到列表中 - 项目

好处：

• 只有一个查询
• 不需要全局变量

当然也可以采用相反的方式： 创建带有列表附加属性的markers-array，然后在initialize中填充列表。