通過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地圖上放置標記

回答

相關問題