无法为Json Web服务加载Ajax Google Maps Gmap

debugcn 发表于 Dev

豪尔赫·罗德里格斯（Jorge Rodriguez）

我正在尝试通过JSON使用Gmaps和Jquery Ajax加载地图，但是我无法在页面上显示该地图，我知道我得到了正确的坐标，因为我在控制台中进行了测试。

我不知道为什么不显示。

这是我的代码

$.ajax({
    url: 'http://api.geonames.org/earthquakesJSON?formatted=true&north=44.1&south=-9.9&east=-22.4&west=55.2&username=warriorshadow&style=full',
    username: "jrodrguez",
    password: "7kZ7MHZ2vj",
    dataType: 'JSON',
    success: function (data) {

        var map = new GMaps({
            el: '#map_canvas',
            lat: 0,
            lng: 0,
        });

        $.each(data.earthquakes, function (key, val) {
            var lat = val.lat; 
            var long = val.lng;
            map.addMarker({
                lat: lat,
                lng: long,

                infoWindow: {
                    content: '<p>La magnitud fue '+val.magnitude+'</p>'}
            });
        });
    }
});

这是我的HTML（仅div）

<div id="map_canvas"></div>

托马斯·西农（Thomas Theunen）

似乎您需要为画布提供宽度和高度才能正确显示，请参见下面的代码段：

$.ajax({
  url: 'http://api.geonames.org/earthquakesJSON?formatted=true&north=44.1&south=-9.9&east=-22.4&west=55.2&username=warriorshadow&style=full',
  username: "jrodrguez",
  password: "7kZ7MHZ2vj",
  dataType: 'JSON',
  success: function(data) {

    var map = new GMaps({
      el: '#map_canvas',
      lat: 0,
      lng: 0,
      zoom: 1
    });

    $.each(data.earthquakes, function(key, val) {
      var lat = val.lat;
      var long = val.lng;
      map.addMarker({
        lat: lat,
        lng: long,

        infoWindow: {
          content: '<p>La magnitud fue ' + val.magnitude + '</p>'
        }
      });
    });
  }
});

#map_canvas {
  height: 300px;
  width: 600px;
  background: #6699cc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<div id="map_canvas"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。