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

Question

您好，我是 stackoverflow（和编码）的新手，但我正在开发一个 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);
        });
      }
    }
  });
}

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

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"
  },
  ...
}

Answer 1

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

1. 您应该在标记单击时设置信息窗口内容（而不是像您所做的那样在循环内）
2. 您应该声明缺少的 marker 变量
3. 必须声明您使用的任何变量，例如 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>