事件侦听器，用于在单击单个标记时将其删除，仅对上次创建的标记起作用

Question

您好，提前感谢您的帮助！

下面是测试代码：

1)使用PHP从mySQL数据库获取lat/lng数据，然后使用该数据形成一个包含初始化数据的JavaScript数组。工作正常。

2)使用初始化的JavaScript数组创建标记。工作正常。

3)允许(左)单击以创建新标记(稍后将添加更多代码以将这些新标记位置重新添加到数据库中)。工作正常。

4)允许右击使用marker.setMap(null)删除标记-从数据库中预加载的标记或新创建的用户标记。用户标记正确删除，预加载的标记不会正确删除，如下所述。

5)预加载的标记和新创建的标记都使用markers.push(标记)语句存储在“标记”数组中。看起来没问题。

一切正常，除了右键单击删除预加载的标记之外。(右键单击删除用户创建的标记可以正常工作。)在任何预加载的标记上单击鼠标右键，只会删除最后一个预加载的标记。这就好像delete事件侦听器在设置预加载标记的循环之外和之后，但它在该循环内。

我认为有问题的部分是带有前导注释"show prev click in database“的部分。任何想法都将不胜感激！我是Google Maps API v3的新手，所以这可能是我遗漏或误解的一些明显的东西。再次感谢！

<!DOCTYPE html>

<html>
    <head>
        <title>Marker Test</title>
        <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #map-canvas, #map_canvas {
                height: 100%;
            }

        </style>
        <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

<?
// Generate JavaScript array initialization from database

$username="REDACTED";
$password="REDACTED";
$database="REDACTED";

$con=mysql_connect(localhost,$username,$password);
@mysql_select_db($database,$con) or die( "Unable to select database");

$query="SELECT * FROM pool where (record_id >= 1765) AND (record_id <= 1769)";
/*
$query="SELECT * FROM pool where (record_id <= '$marker_end') AND (record_id >= '$marker_start')";
$query="SELECT * FROM pool where session = '$session'";
*/
$result=mysql_query($query,$con);

$length=mysql_num_rows($result);
$length_count=1;

if ($result) {
    echo "var PreviousClicks = [\n";
    while($row = mysql_fetch_array($result)) {
        $_lat=$row['google_lat'];
        $_lng=$row['google_lng'];
        $_record_id=$row['record_id'];
        echo "{\n";
        echo "lat: $_lat,\n";
        echo "lng: $_lng,\n";
        echo "title: \"$_record_id\"\n";
        echo "}";
    if($length_count<$length) {echo ",\n";} else {echo "\n";}
    $length_count++;
    }  // end while
    echo "];";
}  // end if
mysql_close();
?>

</script>

<script type="text/javascript">
var map;
var markers = [];

function addMarker(location) {
    var marker = new google.maps.Marker({
    position: location,
    title: "A",
    map: map
    });

    google.maps.event.addListener(marker, 'rightclick', function(event) {
    marker.setMap(null);
    });

    markers.push(marker);

}  //end addMarker function

function initialize() {
    // currently manual center initialization
    var startLoc = new google.maps.LatLng(33.037380,-117.090431);
    var mapOptions = {
        zoom: 16,
        center: startLoc,
        mapTypeId: google.maps.MapTypeId.TRAFFIC
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

    google.maps.event.addListener(map, 'click', function(event) {
        addMarker(event.latLng);
    });

// show prev clicks in database    ------------------------------------------------------------------            

    for (i = 0; i < PreviousClicks.length; i++) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(PreviousClicks[i].lat, PreviousClicks[i].lng),
            title: PreviousClicks[i].title,
            map: map
        });

        google.maps.event.addListener(marker, 'rightclick', function(event) {
            marker.setMap(null);
        });

        markers.push(marker);

    }  // end for

// end "show prev clicks in database" section ----------------------------------------------------

}  // end function initialize

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>

<body>
    <div id="map-canvas">
    </div>
</body>

</html>

Answer 1

在标记的事件处理程序中，this引用回标记。因此：

this.setMap(null);

将从地图中删除标记。

但是使用这段代码可以做更多的事情。特别是：

• 通过使用addMarker()添加新的和以前的标记来避免重复代码。
• 当删除标记时，也将它们从标记数组中删除。

这两种方法都可以实现如下所示：

function addMarker(event) {
    var marker = new google.maps.Marker({
        position: event.latLng,
        title: event.title || "A",
        map: map
    });
    google.maps.event.addListener(marker, 'rightclick', function(event) {
        this.setMap(null);

        //Remove the marker from the markers array.
        for(i=0; i<markers.length; i++) {
            if(markers[i] == this) {
                removed = markers.splice(i, 1);
                break;
            }
        }
    });
    markers.push(marker);
}
function initialize() {
    ...
    google.maps.event.addListener(map, 'click', addMarker);
    ...
    for (i = 0; i < PreviousClicks.length; i++) {
        addMarker({
            latLng: new google.maps.LatLng(PreviousClicks[i].lat, PreviousClicks[i].lng);
            title: PreviousClicks[i].title
        });
    }
}