谷歌地图中的信息窗口不加载

Question

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

我得到了地图上的标记。当我单击它们时，我希望显示位置 ID，但它不起作用。

我正在使用谷歌浏览器。

//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

代码 sn-p：

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 层上为单击事件添加侦听器，并从侦听器的回调函数中显示一个信息窗口。请注意，GeoJSON 层的事件对象包含被点击的特征。

看看下面的sn-p代码：

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>

我希望这会有所帮助！