Question

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

以下测试代码：

1）使用PHP从mySQL数据库获取lat / lng数据，然后使用该数据形成带有初始化数据的JavaScript数组。工作精细。

2）使用初始化的JavaScript数组来创建标记。工作精细。

3）允许（左）单击以创建新标记（稍后将添加更多代码以将这些新标记位置添加回数据库）。工作精细。

4）允许右键单击使用marker.setMap（null）删除标记 - 来自数据库的预加载标记或新创建的用户标记。用户标记正确删除，预先加载的标记不能正确删除，如下所述。

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

除了右键单击删除PRELOADED标记外，一切正常。（右键单击删除用户创建的标记可以正常工作。）任何右键单击任何预加载的标记，只会删除最后预加载的标记。就像删除事件监听器在外部以及设置预加载标记的循环之后，但它在该循环内部。

我认为错误的部分是主要评论“显示数据库中的上一次点击”。任何想法将不胜感激！我是谷歌地图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
        });
    }
}

事件监听器在单击时删除单个标记，仅作用于上次创建的标记

1 个答案: