CartoDB:为图层添加infowindow

CartoDB: add infowindow to layer?

本文关键字：添加 infowindow 图层 CartoDB      更新时间：2023-09-26

我试图在点击和悬停到一个CartoDB地图上添加一个信息窗口，遵循这个例子和文档，但我很挣扎。

这是我的HTML: 
<div id="map"></div>
<script type="infowindow/html" id="infowindow_template">
  <span> custom </span>
  <div class="cartodb-popup">
    <a href="#close" class="cartodb-popup-close-button close">x</a>
     <div class="cartodb-popup-content-wrapper">
       <div class="cartodb-popup-content">
         <h4>{{content.data.postcode}}</h4>
       </div>
     </div>
     <div class="cartodb-popup-tip-container"></div>
  </div>
</script>
这是我的JavaScript: 
window.onload = function() {
  var options = {
    center: [53.2, 0.0],
    zoom: 5
  };
  var map_object = new L.Map('map', options);
  var cartocss = '#combined { marker-fill-opacity: 0.9; marker-line-color: #FFF;marker-line-width: 1;marker-line-opacity: 1; marker-placement: point; marker-type: ellipse; marker-width: 10; marker-fill: #FF6600; marker-allow-overlap: true; }';
  cartodb.createLayer(map_object, {
    user_name: 'myname',
    type: 'cartodb',
    sublayers: [
      {
        type: "http",
        urlTemplate: "http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
        subdomains: [ "a", "b", "c" ]
      },
      {
       sql: 'SELECT * FROM combined',
       cartocss: cartocss
     },
    ]
  })
  .addTo(map_object)
  .on('done', function(layer) {
    var sublayer = layer.getSubLayer(1);
    cartodb.vis.Vis.addInfowindow(map_object, sublayer, [ 'postcode'], {
    infowindowTemplate: $('#infowindow_template').html(),
    templateType: 'mustache'
    });
  })
   .error(function(err) {
       console.log("error: " + err);
   });
});

这在地图上显示了我的点，但是当我点击它们时什么都没有发生。控制台中没有错误。我做错了什么?

更新:奇怪的是，如果我删除第一层并将子层选择器更改为var sublayer = layer.getSubLayer(0)，那么信息窗口就出现了。但我确实需要两层!

尝试将interactivity添加到包含您想要在信息窗口上显示的字段的第二个子层，并再次将setInteraction添加到true。这里有一个工作示例。

相关文章：