在通过loadGeoJson()加载的特性上创建信息窗口
Creating Infowindows on features loaded via loadGeoJson()
如果这是基本的,我很抱歉,但我的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});
});
我的数据集包含超过1000个点,因此硬编码infowindow不起作用,而且我还没有看到任何示例显示如何创建infowindow数组,因为这些特性在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);
});
工作小提琴代码片段:
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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>
相关文章:
- 如何通过解析类信息来使用jQuery创建类
- 如何创建multiselect来显示Django中每个选定项的详细信息
- 如何创建一个脚本,该脚本给定网站列表,它使用其搜索功能来获取信息
- 是否所有面向对象的语言都会在内存中创建大量重复信息
- 使用DOM中的信息创建一个控制器/服务来持久化数据
- Node.js创建一个模块来收集内存(ram)信息
- 如何在HTML中创建一个信息框,显示与悬停SVG路径相关的信息
- 我如何创建一个Chrome应用程序,有效地充当信息亭模式下的启动页面
- 想要在谷歌地图中为标记创建信息窗口
- 为 Google 地图信息框创建自定义关闭按钮
- 在 Backbone.js 中为集合中的一个元素创建详细信息页面
- 如何动态创建集合名称(取决于用户信息)
- Rally sdk 2实用程序用于创建指向详细信息页面/编辑弹出窗口的链接
- 创建可重复的 HTML 表单并从 JS 数组加载信息
- 如何使用php创建应用程序ID后从Facebook获取用户详细信息
- 使用个人信息创建多用户登录系统
- 创建谷歌地图自定义信息窗口的当前方式
- 如何从动态创建的表中删除信息
- 如何为谷歌地图v3中的每个标记创建信息窗口
- 在通过loadGeoJson()加载的特性上创建信息窗口