0

マップをクリックすると、マップ上にマーカーが配置され、緯度と経度と住所が印刷またはhtmlにエコーアウトされるマップがあります。これが私がやりたいことです。新しいマーカーが追加されるたびに緯度と経度と住所をエコーアウトしたいのですが、ページに前のマーカーを表示したままにします。forループでやろうとしています。私はそれを機能させましたが、アラートウィンドウは、新しいマーカーの緯度と経度と住所をエコーアウトする代わりに、オブジェクトオブジェクトと言い続けます。これが私のコードです。

    <html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var poly;
    var map;
    var markers = [];
    var infowindow = null;
    var path = new google.maps.MVCArray;
    var geocoder = new google.maps.Geocoder();

    function geocodePosition(pos) {
      geocoder.geocode({
        latLng: pos
      }, function(responses) {
        if (responses && responses.length > 0) {
          updateMarkerAddress(responses[0].formatted_address);
        } else {
          updateMarkerAddress('Cannot determine address at this location.');
        }
      });
    }

    function updateMarkerStatus(str) {
      document.getElementById('markerStatus').innerHTML = str;
    }

    function updateMarkerPosition(latLng) {
      document.getElementById('info').innerHTML = [
        latLng.lat(),
        latLng.lng()
      ].join(', ');

    }

    function updateMarkerAddress(str) {
      document.getElementById('address').innerHTML = str;
    }

    function initialize() {
        var latLng = new google.maps.LatLng(41.2844783, -84.3558012);
        map = new google.maps.Map(document.getElementById("mapCanvas"), {
            zoom: 14,
            center: latLng,
            mapTypeId: google.maps.MapTypeId.SATELLITE
        });

        poly = new google.maps.Polygon({
            strokeWeight: 3,
            fillColor: '#5555FF'
        });
        poly.setMap(map);
        poly.setPaths(new google.maps.MVCArray([path]));

        google.maps.event.addListener(map, 'click', addPoint);

        infowindow = new google.maps.InfoWindow({   content: "holding..."
    });
    }

    var markers=[];
            for (var i=0;i<markers.length;i++){

     function addPoint(event) {
        path.insertAt(path.length, event.latLng);
        var marker = new google.maps.Marker({
            position: event.latLng,
            map: map,
            draggable: true,
        }); 
            markers.push(marker);
            marker.setTitle("#" + path.length);

        // Add dragging event listeners.

        google.maps.event.addListener(marker, 'dragstart', function() {
            updateMarkerAddress('Dragging...');
        });

        google.maps.event.addListener(marker, 'drag', function() {
            updateMarkerStatus('Dragging...');
            updateMarkerPosition(marker.getPosition());
        });

        google.maps.event.addListener(marker, 'dragend', function() {
            updateMarkerStatus('Drag ended');
            geocodePosition(marker.getPosition());
        });

        google.maps.event.addListener(marker, 'click', function() {
            marker.setMap(null);
            for (var i = 0, I = markers.length; i < I && markers[i] != marker; ++i);
                markers.splice(i, 1);
            path.removeAt(i);
        });

        google.maps.event.addListener(marker, 'dragend', function() {
            for (var i = 0, I = markers.length; i < I && markers[i] != marker; ++i);
                path.setAt(i, marker.getPosition());
        });

        updateMarkerPosition(marker.getPosition());
        geocodePosition(marker.getPosition());

        alert(markers.join("\n"));
     }

    }
    // Onload handler to fire off the app.
    google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
      <style>
      #mapCanvas {
        width: 700px;
        height: 600px;
        float: left;
      }
      #infoPanel {
        float: left;
        margin-left: 10px;
      }
      #infoPanel div {
        margin-bottom: 5px;
      }
    </style>

      <div id="mapCanvas"></div>
      <div id="infoPanel">
        <b>Marker status:</b>
        <div id="markerStatus"><i>Click and drag the marker.</i></div>
        <b>Current position:</b>
        <div id="info"></div>
        <b>Closest matching address:</b>
        <div id="address"></div>
      </div>

</body>
</html>
4

1 に答える 1

0

デバッグするだけの場合は、代わりにconsole.logを使用してみてください。デバッグユーティリティをサポートするほとんどのブラウザでは、より多くの詳細が提供されます。それが何を意味するのかわからない場合は、使用しているブラウザのデバッグツールを検索してください。マーカー変数で「join」を呼び出そうとすると、toStringが呼び出されるか、配列内の各要素が「\n」で結合される前に呼び出されます。ほとんどの複雑なオブジェクトのデフォルトのtoString（）は、かなり役に立ちません。アラートを次のようなものに置き換えます。

console.log(markers);

デバッグを試みていない場合は、アラートボックスとは異なる方法で情報を表示することを検討します。

于 2013-01-18T19:13:17.327 に答える