Javascript 从外部json向google地图添加标记?
我必须向google地图添加多个标记,但数据位于外部json文件中 目前,我正在尝试使用jquery getJSON运行它。但它根本不起作用,console不会返回任何错误Javascript 从外部json向google地图添加标记?,javascript,jquery,json,google-maps,Javascript,Jquery,Json,Google Maps,我必须向google地图添加多个标记,但数据位于外部json文件中 目前,我正在尝试使用jquery getJSON运行它。但它根本不起作用,console不会返回任何错误 google.maps.event.addDomListener(window, 'load', initialize); function initialize() { var map_canvas = document.getElementById('map1');
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()
还有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}
]
}
我刚刚测试了下面的代码&它正在工作。试试看:
<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>
例如,使用外部JSON的Google地图标记
html{高度:100%}
正文{高度:100%;边距:0;填充:0}
#地图画布{高度:100%}
函数初始化(){
变量映射选项={
中心:新google.maps.LatLng(44.5403,-78.5463),
缩放: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',函数(数据){
$.each(数据点、函数(i、值){
var mylatng=new google.maps.LatLng(value.lat,value.lon);
警报(myLatlng);
var marker=new google.maps.marker({
职位:myLatlng,
地图:地图,
标题:“文本”+value.lon
});
});
});
}
$。每个循环都工作正常?警报是否正确地为您提供了锁定信息?不,整个代码部分似乎都不工作。我添加了一个警报(myLatlng);在好几个地方。没有控制台错误谢谢但你改变了什么?此外,我的映射代码位于一个外部js文件中,来自html。那有关系吗?所以有三个文件:html、js和json@user2559519您可以重用此代码。正确的?我的代码的结构和你的代码差不多。我更想知道它为什么有效。这是一个更大项目的测试代码,所以我需要了解我做错了什么。但是当我把这个api代码复制到我的js文件中时,它仍然不起作用。它必须在DOM中吗?或者您在html中添加了什么内容?@user2559519我刚刚介绍了如何使用外部json文件标记不同的位置。外部json文件必须包含在执行html文件的同一目录中。我已经将html、js组合在一个文件中。您可以使用整个代码进行测试&它应该可以工作(您必须包含json文件)。就是这样:)@user2559519在给定的代码中,我这样写。您可以将文件更改为任何其他文件夹,但也必须对代码中的json
路径进行适当的更改:)