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

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. Any您正在使用的变量必须声明，例如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>