Google 地图中的信息窗口未加载

Question

我在显示信息窗口时遇到问题。我已经检查了代码一百万次，但我无法弄清楚。我在下面粘贴了我的代码。请帮我找出问题。

我得到了地图上的标记。当我点击它们时，我想显示一个位置 ID，但它不起作用。

我正在使用 Google Chrome.

//Javascript function to load map
function initMap() {
  var myLatlng = new google.maps.LatLng(37.09024, -95.712891);
  var mapOptions = {
     zoom: 4,
     center: myLatlng,
     scrollwheel: false, 
 }

 var map = new google.maps.Map(document.getElementById("regularMap"), mapOptions);
 var infoWindow = new google.maps.InfoWindow;
 geojson_url = 'https://raw.githubusercontent.com/eyeshu98/dummy/master/geodata.json',
 map.data.loadGeoJson(geojson_url, null, loadMarkers)

 function loadMarkers() {

 map.data.forEach(function(feature) {

 // geojson format is [longitude, latitude] but google maps marker position attribute
 // expects [latitude, longitude]
 var latitude = feature.getGeometry().get().lat()
 var longitude = feature.getGeometry().get().lng()
 var titleText = feature.getProperty('Location ID')
 var infowincontent = document.createElement('div');
  var strong = document.createElement('strong');
  strong.textContent = titleText
  infowincontent.appendChild(strong);
  infowincontent.appendChild(document.createElement('br'));
 console.log(infowincontent);

 var marker = new google.maps.Marker({
   position: {lat: latitude, lng:longitude},
   map: map,
   clickable: true
  });
  marker.addListener('click', function() {
     infoWindow.close();
      infoWindow.setContent(infowincontent);
      infoWindow.open(map, marker);
    });

 });

}
}
google.maps.event.addDomListener(window, 'load', initMap);

Answer 1

您有两组标记，一组由 loadGeoJson 加载，另一组标记是您稍后添加的。来自 DataLayer 的那些位于带有点击侦听器的那些之上，阻止了点击。

最简单的修复，使用以下方法隐藏 DataLayer 中的标记：

map.data.setMap(null);

proof of concept fiddle

代码片段：

function initMap() {
  var myLatlng = new google.maps.LatLng(37.09024, -95.712891);
  var mapOptions = {
     zoom: 4,
     center: myLatlng,
     scrollwheel: false, 
 }

 var map = new google.maps.Map(document.getElementById("regularMap"), mapOptions);
 var infoWindow = new google.maps.InfoWindow;
 geojson_url = 'https://raw.githubusercontent.com/eyeshu98/dummy/master/geodata.json',
 map.data.loadGeoJson(geojson_url, null, loadMarkers);
 map.data.setMap(null); // hide the datalayer

 function loadMarkers() {

 map.data.forEach(function(feature) {

 // geojson format is [longitude, latitude] but google maps marker position attribute
 // expects [latitude, longitude]
 var latitude = feature.getGeometry().get().lat()
 var longitude = feature.getGeometry().get().lng()
 var titleText = feature.getProperty('Location ID')
 var infowincontent = document.createElement('div');
  var strong = document.createElement('strong');
  strong.textContent = titleText
  infowincontent.appendChild(strong);
  infowincontent.appendChild(document.createElement('br'));
 console.log(infowincontent);

 var marker = new google.maps.Marker({
   position: {lat: latitude, lng:longitude},
   map: map,
   clickable: true
  });
  marker.addListener('click', function() {
     infoWindow.close();
      infoWindow.setContent(infowincontent);
      infoWindow.open(map, marker);
    });

 });

}
}
google.maps.event.addDomListener(window, 'load', initMap);

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#regularMap {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="regularMap"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

Answer 2

我认为没有必要在您的代码中创建标记，因为您加载 GeoJSON 图层，它会为您创建标记。

您只需在 GeoJSON 图层上为点击事件添加监听器，并从监听器的回调函数中显示信息 window。请注意，在 GeoJSON 层的情况下，事件对象包含被单击的特征。

看看下面的代码片段：

function initMap() {
  var myLatlng = new google.maps.LatLng(37.09024, -95.712891);
  var mapOptions = {
     zoom: 4,
     center: myLatlng,
     scrollwheel: false, 
 }

 var map = new google.maps.Map(document.getElementById("regularMap"), mapOptions);
 var infoWindow = new google.maps.InfoWindow();
 geojson_url = 'https://raw.githubusercontent.com/eyeshu98/dummy/master/geodata.json',
 
 map.data.loadGeoJson(geojson_url);
 map.data.addListener('click', function(event) {
   var feature = event.feature;
   var latitude = feature.getGeometry().get().lat()
   var longitude = feature.getGeometry().get().lng()
   var titleText = feature.getProperty('Location ID')
   var infowincontent = document.createElement('div');
   var strong = document.createElement('strong');
   strong.textContent = titleText
   infowincontent.appendChild(strong);
   infowincontent.appendChild(document.createElement('br'));
   console.log(infowincontent);
   infoWindow.close();
   infoWindow.setContent(infowincontent);
   infoWindow.setPosition(feature.getGeometry().get());
   infoWindow.open(map);
 });
}

google.maps.event.addDomListener(window, 'load', initMap);

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#regularMap {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="regularMap"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

希望对您有所帮助！

Google 地图中的信息窗口未加载

Infowindow in Google Maps does not load

google-maps

infowindow

google-maps-api-3