Laden von JSON-Daten für die Google MAPS API v3

ausgehend von den folgenden Beispiel-code (aus https://google-developers.appspot.com/maps/documentation/javascript/overlays#SimpleIcons)

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

kann ich laden Sie die Punkte aus einer externen Datei?
Mit dieser Lösung laden von json in eine variable machte ich die folgenden:

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

aber die Datei Strände Liste nicht scheinen, um eine gut formatierte JSON-Datei!
Datei Daten.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]
];
was die "Datei-Strände"? Ich sehe nicht, einen link zu einem format, die in Ihrer Frage.
Ich habe soeben die post

InformationsquelleAutor Nicolaesse | 2012-08-26

  1. 3

    Gibt es ein paar Probleme mit dem aktuellen JSON:

    • Sie verwenden Sie einfache Anführungszeichen statt Anführungszeichen. In JSON-strings müssen gewickelt werden, in Anführungszeichen gesetzt werden.
    • Ihre "Strände" - Eigenschaft muss auch gewickelt werden in Anführungszeichen gesetzt werden.
    • Muss das JSON-Objekt durch das einwickeln von es in geschweifte Klammern ({}).

    Versuchen Sie folgenden 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
        ]
    ]
}
    Thaks! Die JSON-Datei ist nun gültig ist, aber wenn ich es benutze, keine Flagge auf der Karte angezeigt. Ich denke, dass die Daten nicht geladen werden aus der Datei, weil wenn ich Schreibe "alert("OK, Daten werden geladen");" nach "return json;" die Warnung wird nicht gezeigt, wenn die Seite geladen wird. Ich Schnitt die ersten post-einschließlich des HTML-Codes.
    Wenn Sie schreiben "nichts" nach zurück es wird nie "alles", da er bereits zurückgegeben. 🙂

    InformationsquelleAutor jeff

  2. 1

    Scheint eine beliebte Aktivität in Australien. Siehe unten:

    Bulk-Upload-Marker von Excel mit benutzerdefinierten info-Kästen

    InformationsquelleAutor Oliver Burdekin

  3. 0

    Dies ist keine gültige JSON - format. Sieht aus wie Sie brauchen, um es zu einem Objekt, indem man es in {}.

    InformationsquelleAutor geocodezip

Schreibe einen Kommentar