0

我正在尝试使用 google maps API 构建地图，该 API 以 JSON 格式加载数据并将点添加到地图中。

这是 html 页面，可从 servername.com/kmltest/mapsapi.html 访问：

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps javascript</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

function drawAllPoints()
    {pointsData.numLayers = pointsData.layers.length;
        for (var i = 0; i < pointsData.numLayers; i++)
            {var numPoints = pointsData.layers[i].points.length;
            pointsData.layers[i].visible = true;

            document.getElementById("layerSidebarInner").innerHTML = document.getElementById("layerSidebarInner").innerHTML + "<input type=\"checkbox\" id=\"" + pointsData.layers[i].name + "\" >" + pointsData.layers[i].name + "<br />";
            //Eventually, make the checkbox trigger showing and hiding
            //pointsData.layers[i].layerColor = ; //Change a point color variable for this layer?
            for (var j = 0; j < numPoints; j++)
                {// Create a Lat/Long object.
                window.pointsData.layers[i].points[j].position = new google.maps.LatLng(window.pointsData.layers[i].points[j].lat, window.pointsData.layers[i].points[j].long);
                // Set up each point
                window.pointsData.layers[i].points[j].marker = new google.maps.Marker({
                    position: window.pointsData.layers[i].points[j].position,
                    map: window.map,
                    title : window.pointsData.layers[i].points[j].username
                });
                // Set up each information window
                infoWindow = new google.maps.InfoWindow({
                    position: window.pointsData.layers[i].points[j].position,
                    map: window.map,
                    title: window.pointsData.layers[i].points[j].username,
                    content: 'Test '+i+", "+j
                });
                // Try to add a handler that shows the balloon. Why does it show "2 2" and not the array indexes?
                google.maps.event.addListener(pointsData.layers[i].points[j].marker, 'click', function() {alert(i+" "+j);});
                }
        }
    }


var map;
var marker;
var myLatlng;

function initialize() {

myLatlng = new google.maps.LatLng(44.759705, -117.823371);
var mapOptions = {
zoom: 17,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


// This used to be it's own function. Fires off a HTTP request for the Json customer data
var pointsDataJsonhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari, I really don't care about IE6 and 5
pointsDataJsonhttp=new XMLHttpRequest();
pointsDataJsonhttp.onreadystatechange=function()
{
if (pointsDataJsonhttp.readyState==4 && pointsDataJsonhttp.status==200)
    {
    window.pointsData = eval("(" + pointsDataJsonhttp.responseText + ")");
    drawAllPoints();
    }
}
pointsDataJsonhttp.open("GET","/kmltest/test.json",true);
pointsDataJsonhttp.send();

}

//I can't seem to make this work yet, but I'm not worrying about it right now
/*function toggleLayer(layernumber)
{
    if (pointsData.layers[layernumber].visible) {
        pointsData.layers[layernumber] = false;
        }
    else {pointsData.layers[layernumber].visible = true;}
    numPoints = pointsData.layers[layernumber].points.length
    for (j=0; j < numPoints; j++)
        {
        pointsData.layers[layernumber].points[j].setVisible(pointsData.layers[layernumber].visible);
        }
}*/

// Seems like these two do the same thing, so I'm only using one of them
google.maps.event.addDomListener(window, 'load', initialize);

//window.onload = initialize;

    </script>
  </head>
  <body>
    <div id="layerSidebar" style="width: 20%; float: left;"><div id="layerSidebarInner" style="margin:10px;"></div></div>
    <div id="map-canvas" style="width: 80%; float: left;"></div>
    <!-- This line makes any following content get below the bottom of the 2 columns above -->
    <div style="clear: both"></div>
  </body>
</html>

这是它正在加载的（当前静态的）JSON，在 servername.com/kmltest/test.json 的服务器上可用：

{ "layers" :
    [
        {"name" : "Shelf18", 
        "broadband": "adsl",
        "type" : "customerlist",
        "points" :
            [ {"username" : "thompsondsl", "long" : -117.823711, "lat" : 44.760645, "shelf" : "18", "slot": "3", "port" : "2"},
            {"username": "johnsondsl", "long" : -117.822471, "lat" : 44.759705, "shelf": "18", "slot": "3", "port" : "3"}
            ]
        },
        {"name" : "Shelf17",
        "broadband": "adsl",
        "type" : "customerlist",
        "points" :
            [ {"username" : "andersendsl17", "long" : -117.823811, "lat" : 44.760645, "shelf" : "18", "slot": "4", "port" : "2"},
            {"username": "smithdsl", "long" : -117.823371, "lat" : 44.759705, "shelf": "18", "slot": "11", "port" : "3"}
            ]
        }
    ]
}

正如您可能看到的，我已经放置了一些警告框来尝试帮助调试。我不明白为什么当我点击一个地标时，它总是给出“2 2”的结果，而不是像“0 1”这样的结果，具体取决于我点击的地标。就好像它获得了循环控制变量最终得到的值？如果这是正在发生的事情，我该如何正确地做到这一点，这样就不会发生？

4

1 回答 1

1

尝试将您的代码包装在一个函数中。i这将创建一个私有上下文，其中包含和的本地副本j：

(function (i, j) {
    var marker = pointsData.layers[i].points[j].marker;
    google.maps.event.addListener(marker, 'click', function() { 
        alert(i + " " + j); 
    });
})(i, j);

你也可以这样做：

var marker = pointsData.layers[i].points[j].marker;
google.maps.event.addListener(marker, 'click', function() { 
    return function() { alert(i + " " + j); };
}(i, j));
于 2013-10-16T05:26:45.060 回答