Google Map Markers沒有出現在$ .getJSON Javascript中

Question

我正在讀取JSON文件，以將經緯度繪制到Google Maps上。 我嘗試使用不同的方法，但沒有任何結果。 對於這種方法，地圖顯示出來了，但標記不在那里。

//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>

哪里可能出問題了？

Answer 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
            });
        });        
    });

});

Google Map Markers沒有出現在$ .getJSON Javascript中

問題描述

1 個解決方案

解決方案1
1 已采納 2014-07-31 06:32:28

Google Map Markers沒有出現在$ .getJSON Javascript中

問題描述

1 個解決方案

解決方案1 1 已采納 2014-07-31 06:32:28

解決方案1
1 已采納 2014-07-31 06:32:28