我很抱歉,如果这是基本的,但我有非常有限的
JavaScript知识.
我正在制作一个地图,将我在ArcGIS中创建的GeoJSON数据加载到使用ogr2ogr的GeoJSON中.我已经加载了地图,并显示了我的GeoJSON文件中的点标记,而且我甚至还有一个styleFeature()函数根据属性来设置特征的样式.
我遇到的问题是尝试在点击点功能时弹出窗口.
我已经成功地使用代码来设置一个事件监听器,并使用点击的功能中的信息来更新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;
});
我想要做的是发起一个这样的信息窗口的事件,这不起作用：
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});
});
我的数据集由一千多个点组成,所以硬编码的infowindows不起作用,我没有看到任何示例,显示如何创建一个infowindows的数组,因为功能在setStyle()函数中循环,无论是.
我知道这与我缺乏理解范围,事件和对象数组有关,但我只是打墙.
任何帮助将不胜感激.
解决方法
要获得一个点击显示的信息窗口,您需要调用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);
});
working fiddle
代码段：
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,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,"properties": {
"letter": "o","color": "red","rank": "15","ascii": "111","Description": "the first letter o"
},"coordinates": [128.84,-25.76]
}
},{
"id":2,"color": "yellow","Description": "the second letter o"
},"coordinates": [131.87,{
"id":3,"properties": {
"letter": "g","ascii": "103","Description": "the letter g"
},"coordinates": [138.12,-25.04]
}
},{
"id":4,"properties": {
"letter": "l","color": "green","rank": "12","ascii": "108","Description": "the letter l"
},"coordinates": [140.14,-21.04]
}
},{
"id":5,"properties": {
"letter": "e","rank": "5","ascii": "101","Description": "the letter e"
},"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>