javascript - 使用谷歌地图 .loadGeoJson、markerclusterer 和 infowindow Breaking
问题描述
试图通过单击loadGeoJson
和 MarkerClusterers 打开 infowindows。我使用下面的代码是因为我希望能够添加到信息窗口的链接。
https://codepen.io/cbrady97/pen/qKoERJ
<!DOCTYPE html>
<html>
<body>
<div id="map" style="height: 2000px;width: 100%;"></div>
<script>
var infowindow = new google.maps.InfoWindow();
var markers;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: { lat: 42.25, lng: -109.05 },
mapTypeId: 'terrain'
});
map.data.loadGeoJson('https://cors.io/?https://solveatlas.com/s/map-easj.geojson', null, function (features){
markers = features.map(function(feature) {
return new google.maps.Marker({
position: feature.getGeometry().get(0)
});
});
// When the user clicks, open an infowindow
map.data.addListener('click', function(event) {
var feat = event.feature;
var html = "<b>"+feat.getProperty('name')+"</b><br>"+feat.getProperty('description');
html += "<br><a class='normal_link' target='_blank' href='"+feat.getProperty('link')+"'>link</a>";
infowindow.setContent(html);
infowindow.setPosition(event.latLng);
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
infowindow.open(map);
});
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://solveatlas.com/s/m'});
});
map.data.setMap(null);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script src="https://solveatlas.com/s/markerclusterer.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBty3z-bpSUEgG54LF34eu7Sz_4zv7aiss&callback=initMap">
</script>
</body>
</html>
解决方案
您的代码中有许多问题:
google.maps.event.addDomListener(window, 'load', initialize);
您的代码中没有initialize
功能。此外,您正在异步加载 API,这不在回调函数中。- 您正在实例化
infowindow
API 加载之前(回调函数之外):var infowindow = new google.maps.InfoWindow();
- 您正在从 GeoJson 创建标记,但未添加单击侦听器以向它们显示数据,您正在使用
map.data.addListener
,但数据层已从地图 (map.data.setMap(null);
) 中删除。
要使信息窗口出现在标记上,请单击:
InfoWindow
移动函数内部的实例化initMap
。- 为标记创建点击监听器:
map.data.loadGeoJson('https://cors.io/?https://solveatlas.com/s/map-easj.geojson', null, function(features) {
markers = features.map(function(feature) {
var marker = new google.maps.Marker({
position: feature.getGeometry().get(0)
});
// When the user clicks, open an infowindow
marker.addListener('click', function(event) {
var feat = feature;
var html = "<b>" + feat.getProperty('name') + "</b><br>" + feat.getProperty('description');
html += "<br><a class='normal_link' target='_blank' href='" + feat.getProperty('link') + "'>link</a>";
infowindow.setContent(html);
infowindow.open(map, marker);
});
return marker;
});
- 删除数据层上的点击监听器(它不起作用):
// When the user clicks, open an infowindow
map.data.addListener('click', function(event) {
var feat = event.feature;
var html = "<b>"+feat.getProperty('name')+"</b><br>"+feat.getProperty('description');
html += "<br><a class='normal_link' target='_blank' href='"+feat.getProperty('link')+"'>link</a>";
infowindow.setContent(html);
infowindow.setPosition(event.latLng);
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
infowindow.open(map);
});
代码片段:
var infowindow;
var markers;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {
lat: 42.25,
lng: -109.05
},
mapTypeId: 'terrain'
});
infowindow = new google.maps.InfoWindow();
map.data.loadGeoJson('https://cors.io/?https://solveatlas.com/s/map-easj.geojson', null, function(features) {
markers = features.map(function(feature) {
var marker = new google.maps.Marker({
position: feature.getGeometry().get(0)
});
// When the user clicks, open an infowindow
marker.addListener('click', function(event) {
var feat = feature;
var html = "<b>" + feat.getProperty('name') + "</b><br>" + feat.getProperty('description');
html += "<br><a class='normal_link' target='_blank' href='" + feat.getProperty('link') + "'>link</a>";
infowindow.setContent(html);
infowindow.open(map, marker);
});
return marker;
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://solveatlas.com/s/m'
});
});
map.data.setMap(null);
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>
推荐阅读
- html - FontAwesome in
- c++ - 当使用鼠标增加linux终端gui大小时,会出现ncurses窗口边框残像问题
- android - Firebase 在本地网络上工作?这是怎么回事?
- python-3.x - 将 PIL 的输出(多个文件)保存到目录
- python - 当 Python 脚本运行并以 sys.exit(0) 结束时出现错误:以状态 2 退出
- python - 试图做一个计算器,但代码不起作用
- html - 如何制作这样的多边形按钮?
- java - 如何告诉 log4j 没有 web 容器?
- excel - 如何在excel中旋转表格?
- python - 从 10M 样本中找到最接近向量的有效方法