草庐IT

javascript - 在通过 loadGeoJson() 加载的要素上创建信息窗口

coder 2024-05-13 原文

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

我正在制作一张 map ,用于加载我在 ArcGIS 中创建的 GeoJSON 数据,这些数据使用 ogr2ogr 重新格式化为 GeoJSON。我已经加载了 map 并显示了我的 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});
});

我的数据集由一千多个点组成,因此对信息窗口进行硬编码是行不通的,而且我还没有看到任何示例来说明如何创建信息窗口数组,因为这些功能在调用的函数中循环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, 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>

关于javascript - 在通过 loadGeoJson() 加载的要素上创建信息窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23814197/

有关javascript - 在通过 loadGeoJson() 加载的要素上创建信息窗口的更多相关文章

  1. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣,我很好奇如何按顺序创建PI,而不是在过程结果之后生成数字,而是让数字在过程本身生成时显示。如果是这种情况,那么数字可以自行产生,我可以对以前看到的数字实现垃圾收集,从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法,类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  2. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。

  3. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前,我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞,我可以在一个地方轻松完成,而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  4. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  5. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  6. ruby - 使用 Vim Rails,您可以创建一个新的迁移文件并一次性打开它吗? - 2

    使用带有Rails插件的vim,您可以创建一个迁移文件,然后一次性打开该文件吗?textmate也可以这样吗? 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件,这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails,您可以创建一个新的迁移文件并一次性打开它吗?,我们在StackOverflow上找到一个类似的问题: https://sta

  7. ruby-on-rails - 无法使用 Rails 3.2 创建插件? - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject),但我没有脚本/生成,只有脚本/rails,当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗?没有这个命令可以创建插件吗?PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布,插件生成器已经被移除。查看变更日志here.现在

  8. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名,我的程序将对其进行迭代。在我之前使用的bash脚本中,我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是,我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

  9. ruby - 如何在续集中重新加载表模式? - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  10. ruby - 如何使用 RSpec::Core::RakeTask 创建 RSpec Rake 任务? - 2

    如何使用RSpec::Core::RakeTask初始化RSpecRake任务?require'rspec/core/rake_task'RSpec::Core::RakeTask.newdo|t|#whatdoIputinhere?endInitialize函数记录在http://rubydoc.info/github/rspec/rspec-core/RSpec/Core/RakeTask#initialize-instance_method没有很好的记录;它只是说:-(RakeTask)initialize(*args,&task_block)AnewinstanceofRake

随机推荐