我在向包含来自 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>
我的新代码：
我改变了这个：
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的一个工作示例。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句