Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图呼应出纬度&；页面上多个标记的经度。

Javascript 谷歌地图呼应出纬度&；页面上多个标记的经度。

javascript google-maps

Javascript 谷歌地图呼应出纬度&；页面上多个标记的经度。,javascript,google-maps,Javascript,Google Maps,我有一张地图，当你点击地图时，它会在地图上放置一个标记，并打印出或回显到html中纬度、经度和地址。这是我想做的，我想在每次添加新标记时回显纬度、经度和地址，但保留页面上以前的标记以供查看。我正在尝试用for循环来完成它。我让它工作，但警报窗口只是不断地说对象对象，而不是呼应出新标记的纬度、经度和地址。这是我的密码 <html> <head> <meta name="viewport" content="initial-scale=1.0, user-sca

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


var-poly；
var映射；
var标记=[]；
var infowindow=null；
var path=new google.maps.MVCArray；
var geocoder=new google.maps.geocoder（）；
功能地理编码定位（pos）{
地理编码({
车床：位置
}，职能（回应）{
if（responses&&responses.length>0）{
UpdateMarkeradAddress（响应[0]。格式化的\u地址）；
}否则{
UpdateMarkeradAddress（'无法确定此位置的地址'）；
}
});
}
函数updateMarkerStatus（str）{
document.getElementById（'markerStatus'）。innerHTML=str；
}
函数更新标记位置（latLng）{
document.getElementById（'info'）。innerHTML=[
latLng.lat（），
latLng.lng（）
]。加入（‘，’）；
}
函数更新标记地址（str）{
document.getElementById（'address'）。innerHTML=str；
}
函数初始化（）{
var latLng=新的google.maps.latLng（41.2844783，-84.3558012）；
map=new google.maps.map（document.getElementById（“mapCanvas”）{
缩放：14，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.SATELLITE
});
poly=新的google.maps.Polygon({
冲程重量：3，
填充颜色：“#5555FF”
});
poly.setMap（map）；
poly.setpath（新的google.maps.MVCArray（[path]）；
google.maps.event.addListener（映射，'click'，addPoint）；
infowindow=new google.maps.infowindow（{content:“holding…”
});
}
var标记=[]；

对于（var i=0；i如果您只是想调试，请尝试改用console.log。在大多数支持调试实用程序的浏览器中，它将为您提供更多详细信息。如果您不知道我的意思，请搜索您正在使用的任何浏览器的调试工具。当您尝试调用“加入”时在markers变量上，在数组中的每个元素被“\n”联接之前，都会调用toString或调用它们。大多数复杂对象上的默认toString（）没有任何帮助。请使用类似以下内容替换警报：


console.log(markers);


如果您不想调试，我会使用不同于警报框的方式来显示信息