Question

我似乎无法让markerLabel访问位置数组中的位置i，1。我已经移动了它，无论我放在哪里，它返回45所有6个markerLabels，这是位置[5] [1]。当它穿过循环时，我应该有一个markerLabel 31，markerLabel 33，markerLabel 34等。在位置[i] [0]中找到的地址都准确显示。我已经评论了我认为它应该去的次要地方，并把它放在我认为应该的地方。任何有关我所缺少的见解都将不胜感激。

    <!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

</head> 
<body>
    <div id="map" style="width: 500px; height: 400px;"></div>



<script type="text/javascript">
    $(document).ready(function () {
    var locations = [
        ['3026 East College Ave, Ruskin, Fl, USA','31'], 
        ['517 19th Street Northwest, Ruskin, Fl, USA','33'],
        ['101 College Avenue East, Ruskin, Fl, USA','34'],
        ['3350 Laurel Ridge Ave, Ruskin, Fl, USA','37'],
        ['409 Laguna Mill Dr, Ruskin, Fl, USA','40'],
        ['2302 Lloyd Dr, Ruskin, Fl, USA','45']
        ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: new google.maps.LatLng(27.714616,-82.393298),
      mapTypeId: google.maps.MapTypeId.HYBRID
    });


    var marker, i, markerLabel;

    for (i = 0; i < locations.length; i++) {
     var markerLabel = locations[i][1];
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+locations[i][0]+'&sensor=false', null, function (data) {
            var p = data.results[0].geometry.location
          //var markerLabel = locations[i][1];
           marker = new google.maps.Marker({
                position: new google.maps.LatLng(p.lat, p.lng),
                map: map,
                label: {
                    //text: locations[i][1];
                    text: markerLabel,
                    color: "#fff",
                    fontSize: "16px",
                    fontWeight: "bold"
                } //label
            }); // Marker

        }); //$.getJSON
    } //for (i = 0; i < locations.length; i++)

}); //$(document).ready(function ()

</script>

Answer 1

对$.getJSON的调用是异步的。这意味着，你的循环立即运行所有迭代并触发那些异步调用。它会在任何ajax调用完成之前快速连续更改i和markerValue 6次的值，然后当这些函数最终完成并触发其回调时，他们最终访问了一个在其范围内被改变的值，最终得到了相同的结果。

您需要隔离各个ajax请求的范围，以便它们不会引用相同的变量。这应该足以做到这一点：

function make_request(i) { $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+locations[i][0]+'&sensor=false', null, function (data) { var p = data.results[0].geometry.location marker = new google.maps.Marker({ position: new google.maps.LatLng(p.lat, p.lng), map: map, label: { text: locations[i][1], color: "#fff", fontSize: "16px", fontWeight: "bold" } //label }); // Marker }); //$.getJSON } for (i = 0; i < locations.length; i++) { make_request(i); } //for (i = 0; i < locations.length; i++)

为什么array [i]值只返回每个markerLabel的最后一个值？

1 个答案: