Javascript 从外部json向google地图添加标记?

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地图添加多个标记,但数据位于外部json文件中

目前,我正在尝试使用jquery getJSON运行它。但它根本不起作用,console不会返回任何错误

    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
路径进行适当的更改:)