javascript - 从外部访问二维数组中的 Google map 标记

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 8 年前。

Improve this question

我正在构建一个在 map 上显示事件的网页。这些事件由 Google map 上的标记表示，可点击，以便用户可以获得更多信息。到目前为止，这一切运行良好。

网页上的其他地方也有相同事件的列表。我想要的是用户可以单击“在 map 上查看”之类的内容，以便用户在打开信息窗口的情况下放大 map 上的特定事件。

这个主题在 StackOverflow 上并不新鲜，但我发现的现有解决方案似乎不适用于我的代码(或者我只是把事情搞砸了)。我必须找到使用数组的解决方案，但我没有看到解决方案...

标记和 infoWindows 的信息通过 PHP 来自数据库(注入(inject)代码中)。信息进入二维数组。我是一个初学者，所以代码会有点菜鸟。

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 个查询来填充列表和，而是仅创建列表，并将创建标记所需的属性存储为列表项的属性。

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

好处:

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

当然也可以反其道而行之:使用列表的附加属性创建标记数组，然后在initialize中填充列表。