[英]how can I add an infowindow to a data layer in Google maps Api
将信息窗口添加到具有来自geojson链接的数据的数据层时遇到问题。 如下面的代码所示，我似乎无法弹出信息窗口。
我已经使用了本网站上的教程
这是我的代码，希望你们能帮助我。 如果有不清楚的地方，不要犹豫，问我！
<title>Google Maps IKGEO</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
background-color: #4CAF50;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #333;
color: aliceblue;
text-align: center;
}
#legend {
font-family: Arial, sans-serif;
background: #fff;
padding: 25px;
margin: 25px;
border: 3px solid #000;
}
#legend h3 {
margin-top: 0;
}
#legend img {
vertical-align: middle;
}
#controls ul{
background-color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li style="float:right"><a class="active" href="about.html">About</a></li>
</ul>
<div id="map"></div>
<div id="legend">
<h2>Legend</h2>
<div id="controls">
<ul>
<il><input type="checkbox" id="data_layer1"></il><img src="Markers/parkinggarage.png"><h3>Parkeerplaats</h3>
<il><input type="checkbox" id="data_layer2"></il><img src="Markers/supermarket.png"><h3>supermarkt</h3>
<il><input type="checkbox" id="data_layer3"></il><img src="Markers/bicycle.png"><h3>fietsenstalling</h3>
<il><input type="checkbox" id="data_layer4"></il><img src="Markers/kiosk.png"><h3>kiosk</h3>
</ul>
</div>
</div>
<script>
var map;
var checkbox1 = document.getElementById("data_layer1");
var checkbox2 = document.getElementById("data_layer2");
var checkbox3 = document.getElementById("data_layer3");
var checkbox4 = document.getElementById("data_layer4");
function initMap() {
// centrum van de map wanneer deze geladen wordt met een zoom van 12
var mapOptions = {
center: {lat: 52.0704978, lng: 4.3006999000000405},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
stylers: [
{ hue: '#fff300' },
{ invert_lightness: true },
{ saturation: -100 },
{ lightness: 33 },
{ gamma: 0.5 }
]
}, {
featureType: 'poi.business',
elementType: ' labels.icon',
stylers: [
{ visibility: 'on' },
{ hue: '#fff300' },
{ lightness: -15 },
{ saturation: 99 }
]
}, {
featureType: 'water',
elementType: 'geometry',
stylers: [
{ color: '#456596' },
{ lightness: 15 }
]
}, {
featureType: 'transit.station.rail',
elementType: 'labels.text.stroke',
stylers: [
{ visibility: 'on' },
{ color: '#FF6666' }
]
}, {
featureType: 'poi',
elementType: 'geometry',
stylers: [
{ visibility: 'on' },
{ lightness: -10 }
]
}, {
featureType: 'road.local',
elementType: 'geometry.fill',
stylers: [
{ visibility: 'on' },
{ hue: '#FFF333' },
{ lightness: 30 },
{ saturation: 99 }
]
}
]
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
// variabelen om de datastyle aan te passen per geoJson file
var data_layer1 = new google.maps.Data({map: map});
var data_layer2 = new google.maps.Data({map: map});
var data_layer3 = new google.maps.Data({map: map});
var data_layer4 = new google.maps.Data({map: map});
// dit is de wijkgrenzen data (geen style nodig)
map.data.loadGeoJson('http://geoportaal-ddh.opendata.arcgis.com/datasets/cc985cc50ff64b13b744ddaeec613cf9_1.geojson');
// dit is de parkeercentrum data (Met de style atribuut)
data_layer1.loadGeoJson('http://geoportaal-ddh.opendata.arcgis.com/datasets/fc8de486a74d4b66bcd84d453c5f82c4_1.geojson');
data_layer1.setStyle({
icon: 'Markers/parkinggarage.png',
title: 'parkeercentrums'
});
// supermarkten in omgeving Den Haag (Met de style atribuut)
data_layer2.loadGeoJson('http://geoportaal-ddh.opendata.arcgis.com/datasets/d94624fffb6049718469f6f361863f92_0.geojson');
data_layer2.setStyle({
icon: 'Markers/supermarket.png',
title: 'supermarkt'
});
// fietsenstalling in omgeving Den Haag (Met de style atribuut)
data_layer3.loadGeoJson('http://geoportaal-ddh.opendata.arcgis.com/datasets/3ced9e81a5e048cebb989a64e12037b0_0.geojson');
data_layer3.setStyle({
icon: 'Markers/bicycle.png',
title: 'fietsenstalling'
});
// kiosks en straat markten (Met de style atribuut)
data_layer4.loadGeoJson('http://geoportaal-ddh.opendata.arcgis.com/datasets/e070456a09a942acbee3927f30174114_5.geojson');
data_layer4.setStyle({
icon: 'Markers/kiosk.png',
title: 'kiosk en markt',
type: 'kiosk en markt'
});
var icons = {
parking: {
name: 'Parkingcentrum',
icon: 'Markers/parkinggarage.png'
},
supermarkten: {
name: 'supermarkten',
icon: 'Markers/supermarket.png'
},
kiosk: {
name: 'kiosk en markt',
icon: 'Markers/kiosk.png'
},
fietsenstalling: {
name: 'fietsenstalling',
icon: 'Markers/bicycle.png'
}
};
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
'(last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
checkbox1.checked = true;
checkbox2.checked = true;
checkbox3.checked = true;
checkbox4.checked = true;
checkbox1.onclick = function() {
if (!this.checked) {
data_layer1.setMap(null);
}
else
{
data_layer1.setMap(map);
}
};
checkbox2.onclick = function() {
if (!this.checked) {
data_layer2.setMap(null);
}
else
{
data_layer2.setMap(map);
}
};
checkbox3.onclick = function() {
if (!this.checked) {
data_layer3.setMap(null);
}
else
{
data_layer3.setMap(map);
}
};
checkbox4.onclick = function() {
if (!this.checked) {
data_layer4.setMap(null);
}
else
{
data_layer4.setMap(map);
}
};
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
var infowindow1 = new google.maps.infoWindow();
data_layer1.addListener('click', function(event) {
infowindow1.setContent(contentString);
infowindow1.setPosition(event.feature.getGeometry().get());
infowindow1.setOptions({pixelOffset: new google.maps.Size(0, -30)});
infowindow1.open(map)
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVbOZ-baAJyXl2XwA3pTMskXrOmEEizEM&callback=initMap" async defer>
</script>
<div class="footer">
<p> Disclaimer alle data is open source en is toegestemd voor gebruik </p>
</div>
</body>
我的新代码：
是的，google.maps.infoWindow不是构造函数，而是google.maps。 我是nfoWindow。
而且infowindow1是从外部调用的，因此在此处创建它
var infowindow1;
var contentString;
function initMap() {
[...]
infowindow1 = new google.maps.InfoWindow();
}
document.getElementById('data_layer1').addEventListener('click', function(event) {
infowindow1.setContent(contentString);
infowindow1.setPosition({lat: 52.0704978, lng: 4.3006999000000405});
infowindow1.setOptions({pixelOffset: new google.maps.Size(0, -30)});
infowindow1.open(map)
});
我改变了这个：
data_layer1.loadGeoJson('http://geoportaal-ddh.opendata.arcgis.com/datasets/fc8de486a74d4b66bcd84d453c5f82c4_1.geojson');
data_layer1.setStyle({
icon: 'Markers/parkinggarage.png',
title: 'parkeercentrums'
});
至：
data_layer1.loadGeoJson('http://geoportaal-ddh.opendata.arcgis.com/datasets/fc8de486a74d4b66bcd84d453c5f82c4_1.geojson', null, function() {
addDataLayerListeners(data_layer1, 'parkeercentrums');
});
data_layer1.setStyle({
title: 'parkeercentrums'
});
我从样式对象中删除了icon属性，因为它会导致标记无法在地图上绘制。 我还为每个loadGeoJson方法调用指定了一个回调函数。 Geo JSON数据加载完成后，便会运行此功能。 回调函数执行addDataLayerListeners函数并将其传递给数据层和数据层的标题。 addDataLayerListeners定义为：
function addDataLayerListeners(data_layer, infoWindowContent) {
data_layer.addListener('click', function(event) {
infowindow.setContent(infoWindowContent);
infowindow.setPosition(event.feature.getGeometry().get());
infowindow.setOptions({
pixelOffset: new google.maps.Size(0, -30)
});
infowindow.open(map)
});
}
它接受数据层对象（ data_layer ）和一个用于信息窗口内容的字符串（ infoWindowContent ）。 功能增加了一个点击事件侦听到数据层对象，并将infoWindowContent到infowindow.setContent方法调用。
我还使信息窗口成为全局变量，并在initMap函数中实例化了它。 在代码的顶部，我添加
var infowindow;
并在initMap函数中添加：
infowindow = new google.maps.InfoWindow();
我这样做是为了在地图上只有一个信息窗口实例。
看一下这个JSBin的工作示例。
如何在Google Maps标记信息窗口中为标记数组添加数组键数据项？
[英]How can I add the array key data item in google maps marker infowindow for an array of markers?
如何在信息窗口（Google Maps API v3）中填充下拉列表？
[英]How can I populate a dropdown list in an infowindow (Google Maps API v3)?
使用 google maps JS api，如何打开用户单击地图的信息窗口？ 那可能吗？
[英]Using google maps JS api, how can I open an infowindow where the user clicks on the map? Is that possible?
如何将 ajax 数据从谷歌地图信息窗口发送到 Laravel 控制器？
[英]How can i send ajax data from google maps infowindow to laravel controller?
如何在Google Maps InfoWindow中使用jQuery或JavaScript？
[英]How can I use jQuery or JavaScript inside a Google Maps InfoWindow?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.