Question

我有一张地图，当你点击地图时，它会在地图上放置一个标记并打印出来或回显到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>

Answer 1

如果您只是想调试，请尝试使用console.log。在大多数支持调试实用程序的浏览器中，它将为您提供更多详细信息。如果您不知道我的意思，只需搜索您正在使用的任何浏览器的调试工具。当您尝试在markers变量上调用“join”时，将调用toString或数组中的每个元素，然后再加上“\ n”。大多数复杂对象的默认toString（）非常无用。用以下内容替换警报：

console.log(markers);

如果您没有尝试调试，我会查看与提示信息不同的方式。

Google Map Echo Out Latitude。和;页面上多个标记的经度。

1 个答案: