0

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

以下测试代码：

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

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

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

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

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

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

我认为错误部分是带有主要评论“在数据库中显示上一个点击”的部分。任何想法将不胜感激！我是 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>
4

1 回答 1

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
        });
    }
}
于 2013-07-02T20:14:27.217 回答