谷歌地圖API第3版

從（從https://google-developers.appspot.com/maps/documentation/javascript/overlays#SimpleIcons）谷歌地圖API第3版

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <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://maps.googleapis.com/maps/api/js?key=AIzaSyCHgCs40BzMLmN2-GpJ-liYfcYsas-VVsI&sensor=false"> 
    </script> 
    <script type="text/javascript"> 
function initialize() { 
    var mapOptions = { 
    zoom: 10, 
    maxZoom: 12, 
    center: new google.maps.LatLng(-33.9, 151.2), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
           mapOptions); 

    setMarkers(map, beaches); 
} 

/** 
* Data for the markers consisting of a name, a LatLng and a zIndex for 
* the order in which these markers should display on top of each 
* other. 
*/ 

var beaches = (function() { 
    var json = null; 
    $.ajax({ 
     'async': false, 
     'global': false, 
     'url': data.php, 
     'dataType': "json", 
     'success': function (data) { 
      json = data; 
     } 
    }); 
    return json; 
    alert("OK, data loaded"); 
}); 



/*var beaches = [ 
    ['Stuttgart', 48.766700, 9.183330, 4], 
    ['Coogee Beach', -33.923036, 151.259052, 5], 
    ['Cronulla Beach', -34.028249, 151.157507, 3], 
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
    ['Maroubra Beach', -33.950198, 151.259302, 1] 
]; 
*/ 
function setMarkers(map, locations) { 
    // Add markers to the map 

    // Marker sizes are expressed as a Size of X,Y 
    // where the origin of the image (0,0) is located 
    // in the top left of the image. 

    // Origins, anchor positions and coordinates of the marker 
    // increase in the X direction to the right and in 
    // the Y direction down. 
    var image = new google.maps.MarkerImage('images/beachflag.png', 
     // This marker is 20 pixels wide by 32 pixels tall. 
     new google.maps.Size(20, 32), 
     // The origin for this image is 0,0. 
     new google.maps.Point(0,0), 
     // The anchor for this image is the base of the flagpole at 0,32. 
     new google.maps.Point(0, 32)); 
    var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png', 
     // The shadow image is larger in the horizontal dimension 
     // while the position and offset are the same as for the main image. 
     new google.maps.Size(37, 32), 
     new google.maps.Point(0,0), 
     new google.maps.Point(0, 32)); 
     // Shapes define the clickable region of the icon. 
     // The type defines an HTML <area> element 'poly' which 
     // traces out a polygon as a series of X,Y points. The final 
     // coordinate closes the poly by connecting to the first 
     // coordinate. 
    var shape = { 
     coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
     type: 'poly' 
    }; 
    for (var i = 0; i < locations.length; i++) { 
    var beach = locations[i]; 
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     shadow: shadow, 
     icon: image, 
     shape: shape, 
     title: beach[0], 
     zIndex: beach[3] 
    }); 
    } 
} 
    </script> 
    </head> 
    <body onload="initialize()"> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
    </body> 
</html>

以下示例代碼啓動負載JSON數據可以我從外部文件加載點？使用該解決方案load json into variable我作了如下：

var beaches = (function() { 
    var json = null; 
    $.ajax({ 
     'async': false, 
     'global': false, 
     'url': data.json, 
     'dataType': "json", 
     'success': function (data) { 
      json = data; 
     } 
    }); 
    return json; 
})();

但文件列表的海灘似乎並沒有被良好的格式化JSON文件！文件data.json：

beaches: [ 
    ['Bondi Beach', -33.890542, 151.274856, 4], 
    ['Coogee Beach', -33.923036, 151.259052, 5], 
    ['Cronulla Beach', -34.028249, 151.157507, 3], 
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
    ['Maroubra Beach', -33.950198, 151.259302, 1] 
];

來源

2012-08-26 Nicolaesse

什麼「文件的海灘」？我沒有看到您的問題中的格式鏈接。 – geocodezip

我剛更新了帖子 – Nicolaesse

有幾個問題與您當前的JSON：

您可以使用單引號，而不是雙引號。在JSON中，字符串必須用雙引號包裝。
您的「海灘」屬性也必須用引號括起來。
您必須通過將JSON包裝在大括號中（{}）來使JSON成爲對象。

嘗試以下JSON：

{ 
    "beaches": [ 
     [ 
      "BondiBeach", 
      -33.890542, 
      151.274856, 
      4 
     ], 
     [ 
      "CoogeeBeach", 
      -33.923036, 
      151.259052, 
      5 
     ], 
     [ 
      "CronullaBeach", 
      -34.028249, 
      151.157507, 
      3 
     ], 
     [ 
      "ManlyBeach", 
      -33.80010128657071, 
      151.28747820854187, 
      2 
     ], 
     [ 
      "MaroubraBeach", 
      -33.950198, 
      151.259302, 
      1 
     ] 
    ] 
}

來源

2012-08-26 19:51:27 jeff

Thaks！ JSON文件現在是有效的，但是如果我使用它，則地圖上不會顯示任何標誌。我認爲數據不會從文件中加載，因爲如果我寫入「alert（」OK，data loaded「）;」在「返回json」之後加載頁面時不顯示警報消息。我編輯了包括HTML代碼的第一篇文章。 – Nicolaesse

如果您在**返回後編寫「任何」**，它永遠不會到達「任何」，因爲它已經返回。 :-) – Marcelo