我有json数据，我想在地图上显示LatLng数据。现在给定的LatLng显示在地图上，但是当我点击时我没有收到infoWindow，请帮忙。我已经获得了下面的代码：这是我的脚本标记。 请再次告诉我如何做到这一点，再次感谢你
<script>
var obj = {
"location": [
{
"street_address": {
"city": "Trichy",
"state": "TamilNadu",
"address_1": "Test address",
"country": "India"
},
"gps": {
"latitude": 32.67,
"longitude": -85.44
}
},
{
"street_address": {
"city": "Madurai",
"state": "TamilNadu",
"address_1": "Test address",
"country": "India"
},
"gps": {
"latitude": 28.65859029,
"longitude": 77.22063432
}
},
{
"street_address": {
"city": "Chennai",
"state": "TamilNadu",
"address_1": "Test address",
"country": "India"
},
"gps": {
"latitude": 67.1,
"longitude": -157.85
}
},
{
"street_address": {
"city": "Combiatore",
"state": "TamilNadu",
"address_1": "Test address",
"country": "India"
},
"gps": {
"latitude": 52.67,
"longitude": -95.44
}
},
{
"street_address": {
"city": "Tirunelveli",
"state": "TamilNadu",
"address_1": "Test address",
"country": "India"
},
"gps": {
"latitude": 25.9,
"longitude": -97.43
}
}
]
};
var place = [];
var locations = [];
for(var i = 0; i < obj["location"].length;i++){
//var data = {"latitude" : 0, "longitude" : 0};
//data["latitude"] = obj["location"][i]["gps"]
locations.push(obj["location"][i]["gps"]);
place.push(obj["location"][i]["street_address"]);
}
console.log(place);
console.log(locations);
var pointer = new google.maps.LatLng(51.508742,-0.120850);
function intialize(){
var mapOption = {
zoom : 3,
center : pointer,
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOption);
for(var i = 0; i < locations.length; i++){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i]["latitude"], locations[i]["longitude"]),
icon: 'map-icon.png'
});
marker.setMap(map);
console.log(locations[i]["latitude"], locations[i]["longitude"]);
}
for(var i = 0;i < place.length; i++){
var infoWindow = new google.maps.InfoWindow({
content : new google.maps.InfoWindow(place[i]["address_1"], place[i]["city"],place[i]["country"],place[i]["state"])
});
google.maps.event.addListener(marker, 'click', function(){
infoWindow.open(map, marker);
});
console.log(place[i]["address_1"], place[i]["city"],place[i]["country"],place[i]["state"]);
}
}
google.maps.event.addDomListener(window, 'load', intialize);
</script>
答案 0 :(得分：1)
您的代码存在多个问题。
for循环在第二个for循环中，您正在迭代place数组，您正在访问变量marker并期望它成为一个地方＆＃39}。 s标记。但是，marker变量只会在for循环中更新，然后才能在locations数组上进行迭代。
for(var i = 0; i < locations.length; i++){
var marker = new google.maps.Marker(...);
...
}
for(var i = 0;i < place.length; i++){
...
google.maps.event.addListener(marker, ...);
// Here marker will always be the last marker that
// was created in the preceding loop
}
要纠正此问题，请将两个循环合并。
for(var i = 0; i < locations.length; i++){
var marker = new google.maps.Marker(...);
...
google.maps.event.addListener(marker, ...);
// Here marker will be the current location's marker
}
InfoWindow构造函数您未正确调用google.maps.InfoWindow构造函数，因为您正在为InfoWindow参数指定另一个content。
var infoWindow = new google.maps.InfoWindow({
content : new google.maps.InfoWindow(...)
});
然而，API确实content是一个字符串（纯文本或HTML），包含猜测信息窗口的内容。
var infoWindow = new google.maps.InfoWindow({
content : '<div>Hello, I am an info window</div>'
});
for循环范围最后，for循环不会创建新的范围，这意味着局部变量的当前值（如marker）不会被click事件处理程序包装。因此，在for循环结束后，访问处理函数中的那些变量将产生它们的值。
for(var i = 0; i < locations.length; i++){
var marker = new google.maps.Marker(...);
...
google.maps.event.addListener(marker, 'click', function(){
infoWindow.open(map, marker);
// At the time of click the for loop has finished.
// Thus, marker will be the last marker that was created in the loop.
});
}
您可以通过将处理程序包装在函数闭包中来解决此问题。哦，顺便说一下，你只需要一个InfoWindow的实例。
var infoWindow = new google.maps.InfoWindow();
for(var i = 0; i < locations.length; i++){
var marker = new google.maps.Marker(...);
...
google.maps.event.addListener(marker, 'click', (function(marker, i){
return function() {
infoWindow.close();
infoWindow.setContent("<div>" + place[i]["city"] + "</div>");
infoWindow.open(map, marker);
// You could also use this instead of marker here but you'll
// still need the closure for i
}
})(marker, i)); // Pass in marker and i to make the closure work
}
更正后的initialize函数的简化版本如下所示（JSFiddle）。
function intialize(){
var mapOption = {
zoom : 3,
center : pointer,
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOption);
var infoWindow = new google.maps.InfoWindow();
for(var i = 0; i < locations.length; i++){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i]["latitude"], locations[i]["longitude"])
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', (function(marker, i){
return function() {
infoWindow.close();
infoWindow.setContent("<div>" + place[i]["city"] + "</div>");
infoWindow.open(map, this);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', intialize);
答案 1 :(得分：0)
此处仅复制相关代码。我已经改变了infoWindow标记实例创建的位置。由于关闭，每个infoWindow对象都将附加到标记。检查这是否适合您。
function intialize(){
var mapOption = {
zoom : 3,
center : pointer,
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOption);
for(var i = 0; i < locations.length; i++){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i]["latitude"], locations[i]["longitude"]),
icon : 'map-icon.png'
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', (function(){
return function(){
var infoWindow = new google.maps.InfoWindow({
content : new google.maps.InfoWindow(place[i]["address_1"], place[i]["city"],place[i]["country"],place[i]["state"])
});
infoWindow.open(map, marker);
}
})());
}
}