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

Question

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

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

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.

您应该在标记点击时设置信息窗口内容（而不是像您那样在循环内）
您应该声明缺少的 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>

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

Dynamic marker and infoWindow Google Maps API using Google App Engine parsing through a JSON file

json

google-maps

infowindow

google-maps-api-3

google-maps-markers