javascript 从外部json向谷歌地图添加标记？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21401774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add markers to google maps from external json?
提问by Jenson M John
I have to add multiple markers to a google map, but the data is in an external json file.
我必须向谷歌地图添加多个标记，但数据位于外部 json 文件中。
At the moment I'm trying to run it using jquery getJSON. But it will not work at all, and console returns no errors!
目前我正在尝试使用 jquery getJSON 运行它。但它根本不起作用，并且控制台没有返回任何错误！
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var map_canvas = document.getElementById('map1');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(map_canvas, map_options);
$.getJSON('map_points.json', function(data) {
$.each( data.points, function(i, value) {
var myLatlng = new google.maps.LatLng(value.lat, value.lon);
alert(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
});
});
} //End initialize()
And the Json
和 Json
{
"points":[
{"id":1,"lat":44.5403,"lon":-79.5463},
{"id":2,"lat":45.5403,"lon":-78.5463},
{"id":3,"lat":45.5403,"lon":-76.5463},
{"id":4,"lat":45.5403,"lon":-77.5463}
]
}
回答by Jenson M John
I've just tested below code & It's working. Just try :
我刚刚测试了下面的代码&它正在工作。你试一试 ：
<html>
<head>
<title>Eg. Google Maps Marker using External JSON</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src = "http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
$.getJSON('map_points.json', function(data) {
$.each( data.points, function(i, value) {
var myLatlng = new google.maps.LatLng(value.lat, value.lon);
alert(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "text "+value.lon
});
});
});
}
</script>
</head>
<body onload="initialize()">
<form id="form1" runat="server">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
</form>
</body>
</html>
