动态标记和 infoWindow Google Maps API 使用 Google App Engine 通过 JSON 文件解析

Posted 2023-03-28

【中文标题】动态标记和 infoWindow Google Maps API 使用 Google App Engine 通过 JSON 文件解析

【英文标题】：Dynamic marker and infoWindow Google Maps API using Google App Engine parsing through a JSON file

【发布时间】：2020-07-14 07:56:33

【问题描述】：

您好，我是 ***（和编码）的新手，但我正在开发一个 Web 应用程序，我想在其中基于提取的 JSON 文件添加动态标记和信息窗口。有超过 200 个标记，因此它们需要是动态的。我有可以添加标记的代码，但是一旦我添加了 infoWindows，它就没有了。有人能看出为什么吗？输出下降到只有一个标记，没有 infoWindow。

这是我的代码：

function initMap() 

  var myLatLng = 
    lat: 26.967,
    lng: -99.25
  ;

  var map = new google.maps.Map(document.getElementById('map'), 
    zoom: 4,
    center: myLatLng
  );

  $.ajax(
    type: 'GET',
    url: 'https://us-central1-cloud-calendar-project.cloudfunctions.net/InfoWindow',
    success: function(data) 
      data = JSON.parse(data)
      infowindow = new google.maps.InfoWindow();

      for (element in data) 
        new google.maps.Marker(
          position: 
            lat: data[element].lat,
            lng: data[element].lon
          ,
          map: map,
          title: element
        );

        infowindow.setContent(data[element].country);

        marker.addListener('click', function() 
          infowindow.open(map, marker);
        );
      
    
  );

我在 *** 上看到了一个类似问题的帖子，我也尝试过，但没有得到任何标记。

function initMap() 

  var myLatLng = 
    lat: 26.967,
    lng: -99.25
  ;

  var map = new google.maps.Map(document.getElementById('map'), 
    zoom: 4,
    center: myLatLng
  );

  $.ajax(
    type: 'GET',
    url: 'https://us-central1-cloud-calendar-project.cloudfunctions.net/InfoWindow',
    success: function(data) 
      var json = data = JSON.parse(data);
      for (var i = 0; i < json.length; i++) 
        point = new google.maps.LatLng(json[i].lat, json[i].lon);
        contentString = json[i].Country;
        addMarkers(point, contentString);
      
    
  );

  function addMarkers(point, contentString) 
    marker = new google.maps.Marker(
      position: point,
      map: map
    );
    infowindow = new google.maps.InfoWindow(
      content: contentString
    );
    marker.push(marker);
    infos.push(infowindow);
    for (var j = 0; j < markers.length; j++) 
      google.maps.event.addListener(markers[j], 'click', function() 
        infos[j].open(map, markers[j]);
      )
    
  

我的 JSON 文件的输出如下所示：

  "AA": 
    "celsius": 32.27777777777778,
    "country": "AA",
    "day": "25",
    "lat": 12.5,
    "lon": -70.017,
    "month": "03"
  ,
  ...

【问题讨论】：

1) 您不需要为每个标记创建一个新的 Infowindow 对象 2) 您没有在标记单击时设置 Infowindow 内容

我在发布的代码中出现错误：marker is not defined - 您是否在 javascript 控制台中查看错误？

否则，发布一个完整的问题做得很好！

【参考方案1】：

您的代码中存在一些问题。你应该阅读Using Closures in Event Listeners。

您应该在标记单击时设置信息窗口内容（而不是像您所做的那样在循环内） 您应该声明缺少的 marker 变量 必须声明您使用的任何变量，例如 for (element in data) 应为 for (var element in data)

function initMap() 

  var myLatLng = 
    lat: 26.967,
    lng: -99.25
  ;

  var map = new google.maps.Map(document.getElementById('map'), 
    zoom: 4,
    center: myLatLng
  );

  $.ajax(
    type: 'GET',
    url: 'https://us-central1-cloud-calendar-project.cloudfunctions.net/InfoWindow',
    success: function(data) 
      data = JSON.parse(data)

      console.log(data);
      infowindow = new google.maps.InfoWindow();

      for (var element in data) 
        var marker = new google.maps.Marker(
          position: 
            lat: data[element].lat,
            lng: data[element].lon
          ,
          map: map,
          title: element
        );

        google.maps.event.addListener(marker, 'click', (function(marker, element) 

          return function() 

            var content = 'Country: ' + data[element].country;
            content += '<br>Temperature (°C): ' + data[element].celsius;

            infowindow.setContent(content);
            infowindow.open(map, marker);
          

        )(marker, element));
      
    
  );


initMap();

#map 
  height: 180px;

<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

【讨论】：

谢谢！有用！！很高兴，被困在这个问题上好几天了……如果我可以再添加第二个问题。我实际上希望信息窗口不仅显示国家，还显示温度和日期。所以类似：“data[element].country Temerature (C): data[element].celsius Date: data[element].da, data[element].mo” 但由于某种原因，只有 data[element].country 有效在 infowindow.setContent(data[element].country) 中，如果我将其替换为 infowindow.setContent(data[element].celsius)，则标记出现在地图上，但 infor 窗口为空..

没有理由不这样做。查看我编辑的代码（运行代码 sn-p）。我已经添加了国家和摄氏度，它工作正常。

再次阅读您的评论...您不能将文本与此类变量混合。您需要将文本放在引号内并使用+ 符号添加它们。例如：infowindow.setContent('Country: ' + data[element].country); 不管怎样，请检查我更新的代码，它确实显示了这一点。

再次感谢！！这完美地工作。感谢您的所有帮助，我希望您度过余下的一天！