通过JSON循环以在Google地图上放置标记

-1

我正在尝试使用jQuery和javascript生成谷歌地图。纬度和经度值存储在JSON文件中。当用户点击需要生成的状态名称时。通过JSON循环以在Google地图上放置标记

我的代码存在的问题是，图形只能生成index[0]。我的for循环无法正常工作。产生纽约的图表，但它指向尼泊尔，而不是纽约。这里是我的代码：

for (var i in data.universitylist) { 
    var lat = data.universitylist[i].lat; 
    var lng = data.universitylist[i].lng; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     center: { 
      lat: lat, 
      lng: lng 
     }, 
     scrollwheel: false, 
     zoom: 8 
    }); 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: { 
      lat: lat, 
      lng: lng 
     }, 
     title: 'Hello World!' 
    }); 
};

的JSON文件：

您的问题是要重新生成，

var data = { 
    "universitylist": [{ 
      "Name": "Columbia University", 
      "City": "New York", 
      "State": "NY", 
      "lat": 40.7127, 
      "lng": 74.0059 
     },{ 
      "Name": "Stanford University", 
      "City": "Stanford,", 
      "State": "CA", 
      "lat": 37.0000, 
      "lng": 120.0000 
     },{ 
      "Name": "Duke University", 
      "City": "Durham", 
      "State": "NC", 
      "lat": 35.5000, 
      "lng": 80.0000 
     },{ 
      "Name": "University of Pennsylvania", 
      "City": "Philadelphia", 
      "State": "PA", 
      "lat": 41.0000, 
      "lng": 77.5000 
     },{ 
      "Name": "Northcentral University", 
      "City": "Prescott Valley", 
      "State": "AZ", 
      "lat": 34.0000, 
      "lng": 112.0000 
     },{ 
      "Name": "Johns Hopkins University", 
      "City": "Baltimore", 
      "State": "MD", 
      "lat": 39.0000, 
      "lng": 76.7000 
     }, { 
      "Name": "Northwestern University", 
      "City": "Evanston", 
      "State": "IL", 
      "lat": 40.0000, 
      "lng": 89.0000 
     },{ 
      "Name": "Rice University", 
      "City": "Houston", 
      "State": "TX", 
      "lat": 31.0000, 
      "lng": 100.0000 
     },{ 
      "Name": "University of Southern California", 
      "City": "Los Angeles", 
      "State": "CA", 
      "lat": 37.0000, 
      "lng": 120.0000 
     },{ 
      "Name": "Georgia Institute of Technology", 
      "City": "Atlanta", 
      "State": "GA", 
      "lat": 32.9605, 
      "lng": 83.1132 
     } 
    ] 
};

来源

2016-03-07 shiva

现在你已经工作正常的代码：https://jsfiddle.net/f4ksqyz5/。你能否在http://jsfiddle.net上显示这个问题的例子。如果标记放置在错误的地方，那么听起来就像你的纬度/经度值不正确。 –

地图为for循环中的每个迭代。

外尝试服用，并改变你的for in到for： -

var data = { 
 
    "universitylist": [{ 
 
    "Name": "Columbia University", 
 
    "City": "New York", 
 
    "State": "NY", 
 
    "lat": 40.7127, 
 
    "lng": 74.0059 
 
    }, { 
 
    "Name": "Stanford University", 
 
    "City": "Stanford,", 
 
    "State": "CA", 
 
    "lat": 37.0000, 
 
    "lng": 120.0000 
 
    }, { 
 
    "Name": "Duke University", 
 
    "City": "Durham", 
 
    "State": "NC", 
 
    "lat": 35.5000, 
 
    "lng": 80.0000 
 
    }, { 
 
    "Name": "University of Pennsylvania", 
 
    "City": "Philadelphia", 
 
    "State": "PA", 
 
    "lat": 41.0000, 
 
    "lng": 77.5000 
 
    }, { 
 
    "Name": "Northcentral University", 
 
    "City": "Prescott Valley", 
 
    "State": "AZ", 
 
    "lat": 34.0000, 
 
    "lng": 112.0000 
 
    }, { 
 
    "Name": "Johns Hopkins University", 
 
    "City": "Baltimore", 
 
    "State": "MD", 
 
    "lat": 39.0000, 
 
    "lng": 76.7000 
 
    }, { 
 
    "Name": "Northwestern University", 
 
    "City": "Evanston", 
 
    "State": "IL", 
 
    "lat": 40.0000, 
 
    "lng": 89.0000 
 
    }, { 
 
    "Name": "Rice University", 
 
    "City": "Houston", 
 
    "State": "TX", 
 
    "lat": 31.0000, 
 
    "lng": 100.0000 
 
    }, { 
 
    "Name": "University of Southern California", 
 
    "City": "Los Angeles", 
 
    "State": "CA", 
 
    "lat": 37.0000, 
 
    "lng": 120.0000 
 
    }, { 
 
    "Name": "Georgia Institute of Technology", 
 
    "City": "Atlanta", 
 
    "State": "GA", 
 
    "lat": 32.9605, 
 
    "lng": 83.1132 
 
    }] 
 
}; 
 

 
var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
    lat: 33, 
 
    lng: 100 
 
    }, 
 
    scrollwheel: false, 
 
    zoom: 3 
 
}); 
 

 
for (var i = 0; i < data.universitylist.length; i++) { 
 
    var lat = data.universitylist[i].lat; 
 
    var lng = data.universitylist[i].lng; 
 

 
    console.log(i, lat, lng); 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: { 
 
     lat: lat, 
 
     lng: lng 
 
    }, 
 
    title: 'Hello World!' 
 
    }); 
 
};

#map { 
 
    height: 400px; 
 
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>

来源

2016-03-07 08:15:30 BenG

谢谢你的回复.... :)但事情是你是在脚本部分存储json数据，而不是把它作为外部json文件。你绝对正确，但当我试图从经度和纬度ext json文件，我没有得到结果 – shiva

通过JSON循环以在Google地图上放置标记

回答

相关问题