Jquery 在谷歌地图窗口中显示JSON文件_Jquery_Json_Google Maps_Get

Jquery 在谷歌地图窗口中显示JSON文件

jquery json google-maps

Jquery 在谷歌地图窗口中显示JSON文件,jquery,json,google-maps,get,Jquery,Json,Google Maps,Get,我试图在谷歌地图窗口中显示一个json文件 Chrome的隐私政策使得在您自己的域中显示本地json文件变得极其复杂我尝试在内部运行一个本地Web服务器，提供文件并对localhost进行AJAX调用，使用$.getJSON方法显示信息 <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">

我试图在谷歌地图窗口中显示一个json文件

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

我尝试在内部运行一个本地Web服务器，提供文件并对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>


信息窗口
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
//此示例在澳大利亚中部显示一个标记。
//当用户单击标记时，将打开一个信息窗口。
函数initMap（）{
var hc={lat:40.4512，液化天然气：-85.3700}；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：4，
中心：hc
});
var obj=$.getJSON（“ajax/GeoObs.json”，函数（数据）{
var项目=[]；
$。每个（数据、函数（键、值）{
items.push（“”+val+“”）；
});
$（“”{
“类”：“我的新列表”，
html:items.join（“”）
}).附于（“主体”）；
});
var infowindow=new google.maps.infowindow({
内容：obj
});
var marker=new google.maps.marker({
职位：hc，
地图：地图，
标题：“哈特福德市”
});
marker.addListener（'click'，function（））{
信息窗口。打开（地图、标记）；
});
}

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

您的问题是：；您正在发出异步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);
        });
    });
}

函数initMap（）{
var hc={
纬度：40.4512，
液化天然气：-85.3700
};
var map=new google.maps.map（document.getElementById（'map'）{
缩放：4，
中心：hc
});
$.getJSON（“ajax/GeoObs.json”，函数（数据）{
var项目=[]；
$。每个（数据、函数（键、值）{
items.push（“”+val+“”）；
});
var infowindow=new google.maps.infowindow({
内容：“”+项。加入（“+””
});
var marker=new google.maps.marker({
职位：hc，
地图：地图，
标题：“哈特福德市”
});
marker.addListener（'click'，function（））{
信息窗口。打开（地图、标记）；
});
});
}

正如其他程序员所建议的那样，

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'
  });

getJSON是异步的。在回调方法中使用数据（创建标记/信息窗口）。嗯……澳大利亚的

lat

应该是南半球的-40左右，而

lat

应该是正值，因为它位于格林威治以东；你确定你说的对吗？邓肯，我没听你的；如果他只设置信息窗口的内容，并在

单击事件触发后调用打开（）方法，那么如何立即调用信息窗口
。同时，对json文件的ajax请求可能还没有完成。即使您只在用户单击时打开infowindow，但在ajax响应完成后，您已经在一开始就设置了infowindow内容（它将是null
）。我知道JSON/ajax请求背后的概念和机制，所以我只想澄清您之前评论背后的含义。感谢这项工作-完美，只是我无法显示json数据。如果我错了，请纠正我的错误，但是我是否应该能够在“var infowindow”的内容中传递“obj”的变量？如果您看到我创建的Bin，那么内容设置为字符串只是为了测试它。所以它起作用了。我不知道对象在哪里，但infowindow的内容参数应该是字符串或HTML节点。不要引用我的话，因为我不在，无法查看。如果我以前的工作正常，您知道该怎么做……：）除此之外的任何其他帮助请告诉我是的，内容参数
接受字符串
或DOM节点
。您好，谢谢您的回复。将obj变量设置为“contentstring”是有意义的。我想我正在努力将内容从json提取到字符串。Google的例子显示直接从div容器读取文本。您好，您遇到的第一个问题已经解决。您现在可以在信息窗口中显示一些内容，这是您以前无法做到的。你现在要求什么。。？如果你不想接受我的回答，因为这对你来说还不够努力，那很好…我的工作方式是我解决一个问题，你付钱…你有另一个问题，我们解决它…你付钱。我就是这样工作的。
  google.maps.event.addListener(map, "bounds_changed", function(){
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map, marker);
    });
  });
}