Question

我正在尝试在Google地图窗口中显示json文件。

Chrome的隐私权政策使您在自己的域中显示本地json文件变得非常复杂。

我试图运行本地网络服务器，提供文件并对localhost进行AJAX调用，使用$ .getJSON方法在内部显示信息。

   <!DOCTYPE html>
    <html>
    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <title>Info windows</title>
        <style type="text/css">/* Always set the map height explicitly to define the size of the div
           * element that contains the map. */
          #map {
            height: 100%;
          }
          /* Optional: Makes the sample page fill the window. */
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
        </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
    <div id="map"></div>
    <script>

          // This example displays a marker at the center of Australia.
          // When the user clicks the marker, an info window opens.

          function initMap() {
            var hc = {lat: 40.4512, lng: -85.3700};
            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 4,
              center: hc
            });

    var obj = $.getJSON( "ajax/GeoObs.json", function( data ) {
      var items = [];
      $.each( data, function( key, val ) {
        items.push( "<li id='" + key + "'>" + val + "</li>" );
      });

      $( "<ul/>", {
        "class": "my-new-list",
        html: items.join( "" )
      }).appendTo( "body" );
    });

            var infowindow = new google.maps.InfoWindow({
              content: obj
            });

            var marker = new google.maps.Marker({
              position: hc,
              map: map,
              title: 'Hartford City'
            });
            marker.addListener('click', function() {
              infowindow.open(map, marker);
            });
          }
        </script><script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCz672JUYjod6zzfxnBg_rzBNsBfbbjpJc&callback=initMap">
        </script></body>
    </html>

显示标记并创建一个窗口。但是，它不显示任何数据。

Answer 1

你的问题是这样的;你正在制作一个异步的AJAX请求来读取你的json文件。

然而，您然后立即初始化infowindow及其内容，即在ajax请求有时间完成之前。

将代码移动到ajax请求完成后发生的回调函数中，例如：

function initMap() {
    var hc = {
        lat: 40.4512,
        lng: -85.3700
    };
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: hc
    });

    $.getJSON("ajax/GeoObs.json", function(data) {
        var items = [];
        $.each(data, function(key, val) {
            items.push("<li id='" + key + "'>" + val + "</li>");
        });

        var infowindow = new google.maps.InfoWindow({
            content: '<ul>' + items.join("") + '</ul>'
        });

        var marker = new google.maps.Marker({
            position: hc,
            map: map,
            title: 'Hartford City'
        });
        marker.addListener('click', function() {
            infowindow.open(map, marker);
        });
    });
}

Answer 2

正如编程人员已经建议的那样，getJSON是异步的，因此您必须在infowindow显示其内容之前考虑到这一点。这是您可以采取的另一种方法：

function initMap() {
 var hc = {lat: 40.4512, lng: -85.3700};
 var map = new google.maps.Map(document.getElementById('map'), {
 zoom: 4,
 center: hc
 });

 var obj = $.getJSON( "ajax/GeoObs.json", function( data ) {
 var items = [];
    $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
    });

 $( "<ul/>", {
 "class": "my-new-list",
  html: items.join( "" )
 }).appendTo( "body" );
});

  var infowindow = new google.maps.InfoWindow({
    content: "Simple Test"
  });

  var marker = new google.maps.Marker({
    position: hc,
    map: map,
    title: 'Hartford City'
  });

然后只需添加一个event listener，例如bounds_changed，这样当地图加载时，infowindow内的内容就会显示出来：

  google.maps.event.addListener(map, "bounds_changed", function(){
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map, marker);
    });
  });
}

Here is a JSBIN to show how it works

在Google Map窗口中显示JSON文件

2 个答案: