javascript 在通过 loadGeoJson() 加载的功能上创建信息窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23814197/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating Infowindows on features loaded via loadGeoJson()
提问by TampaCraig
I apologize if this is basic, but I have very limited javascript knowledge.
如果这是基本知识，我深表歉意，但我的 JavaScript 知识非常有限。
I'm making a map that loads GeoJSON data that I created in ArcGIS reformatted to GeoJSON using ogr2ogr. I've got the map loading and showing the point markers from my GeoJSON file, and I've even got a styleFeature()function to set styling on the features based on their properties.
我正在制作一张地图，用于加载我在 ArcGIS 中创建的 GeoJSON 数据，并使用 ogr2ogr 将其重新格式化为 GeoJSON。我已经加载了地图并显示了我的 GeoJSON 文件中的点标记，我什至有一个styleFeature()函数可以根据它们的属性在特征上设置样式。
The problem I'm having is trying to have infowindows pop up when a point feature is clicked on.
我遇到的问题是试图在单击点要素时弹出信息窗口。
I have successfully used the code to set a event listener and update the contents of a div with the information from a clicked feature:
我已成功使用代码设置事件侦听器并使用来自单击功能的信息更新 div 的内容：
map.data.loadGeoJson('http://www.myurl.com/file.json');
map.data.setStyle(styleFeature);
map.data.addListener('click', function(event) {
var myHTML = event.feature.getProperty('Description');
document.getElementById('info-box').innerHTML = myHTML;
});
What'd I'd like to do instead is have an event that launches an infowindow like this, which doesn't work:
我想做的是有一个事件来启动这样的信息窗口，但它不起作用：
map.data.loadGeoJson('http://www.myurl.com/file.json');
map.data.setStyle(styleFeature);
map.data.addListener('click', function(event) {
var myHTML = event.feature.getProperty('Description');
var infowindow = new google.maps.InfoWindow({content: myHTML});
});
My dataset consists of over a thousand points so hard-coding the infowindows doesn't work, and I haven't seen any examples that show how to create an array of infowindows as the features are looped through in the function called by setStyle()either.
我的数据集由一千多个点组成，因此对 infowindows 进行硬编码不起作用，而且我还没有看到任何示例说明如何创建一个 infowindows 数组，因为这些特征在两者调用的函数中循环setStyle()。
I know this has to do with my lack of understanding scope, events, and object arrays, but I'm just hitting a wall.
我知道这与我缺乏对范围、事件和对象数组的理解有关，但我只是碰壁了。
Any help would be appreciated.
任何帮助，将不胜感激。
回答by geocodezip
To get the infowindow to display on a click you need to call open().
要在单击时显示信息窗口，您需要调用 open()。
// global infowindow
var infowindow = new google.maps.InfoWindow();
// When the user clicks, open an infowindow
map.data.addListener('click', function(event) {
var myHTML = event.feature.getProperty("Description");
infowindow.setContent("<div style='width:150px; text-align: center;'>"+myHTML+"</div>");
infowindow.setPosition(event.feature.getGeometry().get());
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
infowindow.open(map);
});
code snippet:
代码片段：
var infowindow = new google.maps.InfoWindow();
function gotoFeature(featureNum) {
var feature = map.data.getFeatureById(features[featureNum].getId());
if (!!feature) google.maps.event.trigger(feature, 'changeto', {feature: feature});
else alert('feature not found!');
}
function initialize() {
// Create a simple map.
features=[];
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 4,
center: {lat: -28, lng: 137.883}
});
google.maps.event.addListener(map,'click',function() {
infowindow.close();
});
map.data.setStyle({fillOpacity:.8});
// Load a GeoJSON from the same server as our demo.
var featureId = 0;
google.maps.event.addListener(map.data,'addfeature',function(e){
if(e.feature.getGeometry().getType()==='Polygon'){
features.push(e.feature);
var bounds=new google.maps.LatLngBounds();
e.feature.getGeometry().getArray().forEach(function(path){
path.getArray().forEach(function(latLng){bounds.extend(latLng);})
});
e.feature.setProperty('bounds',bounds);
e.feature.setProperty('featureNum',features.length-1);
}
});
// When the user clicks, open an infowindow
map.data.addListener('click', function(event) {
var myHTML = event.feature.getProperty("Description");
infowindow.setContent("<div style='width:150px; text-align: center;'>"+myHTML+"</div>");
infowindow.setPosition(event.feature.getGeometry().get());
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
infowindow.open(map);
});
map.data.addGeoJson(googleJSON);
}
google.maps.event.addDomListener(window, 'load', initialize);
var googleJSON = {
"type": "FeatureCollection",
"features": [
{
"id":0,
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71",
"Description": "the letter G"
},
"geometry": {
"type": "Point",
"coordinates": [123.61, -22.14]
}
},
{
"id":1,
"type": "Feature",
"properties": {
"letter": "o",
"color": "red",
"rank": "15",
"ascii": "111",
"Description": "the first letter o"
},
"geometry": {
"type": "Point",
"coordinates": [128.84, -25.76]
}
},
{
"id":2,
"type": "Feature",
"properties": {
"letter": "o",
"color": "yellow",
"rank": "15",
"ascii": "111",
"Description": "the second letter o"
},
"geometry": {
"type": "Point",
"coordinates": [131.87, -25.76]
}
},
{
"id":3,
"type": "Feature",
"properties": {
"letter": "g",
"color": "blue",
"rank": "7",
"ascii": "103",
"Description": "the letter g"
},
"geometry": {
"type": "Point",
"coordinates": [138.12, -25.04]
}
},
{
"id":4,
"type": "Feature",
"properties": {
"letter": "l",
"color": "green",
"rank": "12",
"ascii": "108",
"Description": "the letter l"
},
"geometry": {
"type": "Point",
"coordinates": [140.14,-21.04]
}
},
{
"id":5,
"type": "Feature",
"properties": {
"letter": "e",
"color": "red",
"rank": "5",
"ascii": "101",
"Description": "the letter e"
},
"geometry": {
"type": "Point",
"coordinates": [144.14, -27.41]
}
}
]
};html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js?ext=.js"></script>
<div id="map-canvas"></div>