Google Map Markers 未出现在 $.getJSON Javascript 中答案

【问题标题】：Google Map Markers does not appear in $.getJSON JavascriptGoogle Map Markers 未出现在 $.getJSON Javascript 中
【发布时间】：2014-09-22 23:59:07
【问题描述】：

我正在读取 JSON 文件，以将我的纬度和经度绘制到 Google 地图上。我尝试过使用不同的方法，但没有任何结果。对于这种方法，地图显示但标记不存在。

//this is my json file: out1copy.json
[{
  "GPSLatitude": "1.306279",
  "GPSLongitude": "103.904783",
  "Title": "Joo Chiat Road"
},
{
  "GPSLatitude": "1.343176",
  "GPSLongitude": "103.851983",
  "Title": "Braddell Road"
},
{
  "GPSLatitude": "1.318105",
  "GPSLongitude": "103.766597",
  "Title": "Clementi Avenue"
},
{
  "GPSLatitude": "1.427895",
  "GPSLongitude": "103.837806",
  "Title": "Yishun Central"
}]

这是我的 html 文件：

<!DOCTYPE html> 
<html>
<head>
<title>Try (Markers gone)</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
</style>
<body>
<div id="map-canvas"></div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

var map;
var myLatlng = new google.maps.LatLng(1.3667, 103.8);
var mapOptions = {
        zoom: 11,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

$.getJSON('out1copy.json', function(data){ 
    $.each(data.markers, function(i, item) {
        var latlng = new google.maps.LatLng(item.GPSLatitude,item.GPSLongitude);
        new google.maps.Marker({
            position: latlng,
            map: map
        });
    });        
});

</script>
</head>
</html>

哪里出了问题？

【问题讨论】：

我已经测试了除了 JSON 调用之外的所有代码部分 - jsfiddle.net/Rkj8T/1 你看到任何控制台错误吗？您能在开发者工具的网络标签中看到请求吗？
@JonathanCrowe 标记终于起作用了！！你能向我解释为什么有 2 var latlng 吗？调用 .json 文件时，它总是失败而不显示错误..

标签： javascript json google-maps-markers

【解决方案1】：

在运行地图功能之前，您需要等待 dom 加载：

google.maps.event.addDomListener(window, 'load', function() {
    var map;
    var myLatlng = new google.maps.LatLng(1.3667, 103.8);
    var mapOptions = {
            zoom: 11,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    $.getJSON('out1copy.json', function(data){ 
        $.each(data.markers, function(i, item) {
            var latlng = new google.maps.LatLng(item.GPSLatitude,item.GPSLongitude);
            new google.maps.Marker({
                position: latlng,
                map: map
            });
        });        
    });

});

【讨论】：

我已经编辑了它，但我的标记仍然不存在。
你能做一个小提琴吗？这肯定有助于调试
另外——你的结束应该就在你的开始标签之前。这可能会引起一些奇怪
对不起，我不熟悉小提琴。但这是我的结果jsfiddle.net/Rkj8T
@itnoobrm 您是否尝试修复结束标记的位置？