使用 Ajax 和 jQuery 从 json 向 Google Map 添加标记的问题答案

【问题标题】：Issue on Adding Markers to Google Map From json Using Ajax and jQuery使用 Ajax 和 jQuery 从 json 向 Google Map 添加标记的问题
【发布时间】：2014-01-02 19:05:03
【问题描述】：

我正在尝试使用以下代码从 json 文件中添加一些标记，但它不起作用！在这里你可以看到一个正在运行的 DEMO

var map;
$(document).ready(function () {
  var latlng = new google.maps.LatLng(11.818965,123.727169);
  var myOptions = {
        zoom: 0,
        center: latlng,
        disableDefaultUI: true,
        scaleControl: true,
        zoomControl: true,
        zoomControlOptions: {
          style: google.maps.ZoomControlStyle.SMALL
        },
        mapTypeControl:true,
        draggableCursor: 'move',     
        mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  // map.setOptions({styles: styles}); // styles is not defined

  $.ajax({
        type: "POST",
        url: 'http://supermobile.dk/html5/webApp.GMAP/json/demo.txt',
        dataType: 'json',

        success: function(data){ 
          locations.length = 0;
          for (p = 0; p < data.length; p++) {
            locations.push(Array(data[markers].latitude,data[markers].longitude));
          }
        }
  });   
});

你能告诉我我在这里做错了什么吗？谢谢

更新：

<!DOCTYPE html>
<html>
<head>
   <script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
   <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <style>
  #map_canvas {
    width: 100%;
    height: 400px;
}
  </style>
</head>
<body>
  <script>
  var map;
$(document).ready(function () {
    var latlng = new google.maps.LatLng(11.818965,123.727169);
    var myOptions = {
        zoom: 0,
        center: latlng,
        disableDefaultUI: true,
        scaleControl: true,
        zoomControl: true,
        zoomControlOptions: {
       style: google.maps.ZoomControlStyle.SMALL
  },
  mapTypeControl:true,
  draggableCursor: 'move',     
  mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 $.ajax({
    type: "POST",
    url: 'data.json',
    dataType: 'json',

    success: function(data){ 
      locations.length = 0;
      for (p = 0; p < data.length; p++) {
        locations.push(Array(data[p].latitude,data[p].longitude));
        // To add the marker to the map, use the 'map' property
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(data[p].latitude,data[p].longitude),
          map: map,
          title:"marker "+p
        });
      }
    }
  });   
});
  </script>
</body>
</html>

【问题讨论】：

标签： jquery ajax google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

如果您希望标记出现在地图上，需要创建它们并将它们添加到地图中。

  $.ajax({
    type: "POST",
    url: 'http://supermobile.dk/html5/webApp.GMAP/json/demo.txt',
    dataType: 'json',

    success: function(data){ 
      locations.length = 0;
      for (p = 0; p < data.markers.length; p++) {
        locations.push(Array(data.markers[p].latitude,data.markers[p].longitude));
        // To add the marker to the map, use the 'map' property
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(data.markers[p].latitude,data.markers[p].longitude),
          map: map,
          title:"marker "+p
        });
      }
    }
  });

working fiddle (with hardcoded data)

working online example

【讨论】：