通过loadGeoJson（）加载的功能创建Infowindows [英] Creating Infowindows on features loaded via loadGeoJson()

问题描述

我很抱歉，如果这是基本的，但我有非常有限的JavaScript知识。

我制作地图，加载在ArcGIS中创建的GeoJSON数据，并将其重新格式化为GeoJSON使用ogr2​​ogr。我已经加载了地图并显示了我的GeoJSON文件中的点标记，并且我还有一个 styleFeature（）函数来根据它们的特征设置特征的样式属性。

我遇到的问题是尝试让点击功能时弹出infowindows。

我已成功使用代码来设置事件侦听器，并使用单击的功能中的信息更新div的内容：

  map.data.loadGeoJson（ 'http://www.myurl.com/file.json'）; 
 
 map.data.setStyle（styleFeature）; 
 $ b $ map.data.addListener（'click'，function（event）{
 var myHTML = event.feature.getProperty（'Description'）; 
 document.getElementById（' info-box'）。innerHTML = myHTML; 
}）; 
  

我想要做的事是发起一个像这样的infowindow事件，这是行不通的：

  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（）调用的函数中循环。

我知道这与我对范围，事件和对象数组缺乏理解有关，但我只是碰壁了。

<如果你想让infowindow在点击上显示，你需要调用open（）方法。

  //全球infowindow 
 var infowindow =新google.maps.InfoWindow（）; 
 
 //当用户点击时，打开一个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（）{//创建一个简单的地图。特征= []; 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：0.8}）; //从与我们的演示相同的服务器加载GeoJSON。 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）;}}）; //当用户点击时，打开一个infowindow map.data.addListener（'click'，function（event）{var myHTML = event.feature.getProperty（Description）; infowindow.setContent（< div style ='宽度：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：字母G}， ：{type：Point，coordinates：[123.61，-22.14]}}，{id：1，type：Feature，properties：{letter：o ，颜色：红色，等级：15，ascii：111，描述：第一个字母，几何：{type：Point ，坐标：[128.84，-25.76]}}，{id：2，type：Feature，properties：{letter：o，color：yellow， rank：15，ascii：111，Description：第二个字母o}，geometry：{type：Point，coor dinates：[131.87，-25.76]}}，{id：3，type：Feature，properties：{letter：g，color：blue ：7，ascii：103，描述：字母g}，geometry：{type：Point，coordinates：[138.12，-25.04]}} ，type：Feature，properties：{letter：l，color：green，rank：12，ascii： 108，Description：字母l}，geometry：{type：Point，coordinates：[140.14，-21.04]}}，{id：5， ：特征，属性：{字母：e，颜色：红色，等级：5，ascii：101，描述： }，geometry：{type：Point，coordinates：[144.14，-27.41]}}]};  
  h tml，body，＃map-canvas {height：100％; margin：0px; < script src =https：//   
 

I apologize if this is basic, but I have very limited javascript knowledge.

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.

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:

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.

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.

解决方案

To get the infowindow to display on a click you need to call 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

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>

这篇关于通过loadGeoJson（）加载的功能创建Infowindows的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！