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 回答