0

こんにちは。ご協力ありがとうございます。

次のテスト コード:

1) PHP を使用して mySQL データベースから緯度/経度データを取得し、そのデータを使用して初期化データを含む 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