1

我正在建立一个社区地图，其中包括一些树坑的位置。该地图可以在这里找到http://moabiter-baumscheiben.seedbomb.city/map/。我使用 mapbox 作为底图和 cartodb 来包含带有树坑标记的图层。

我设法让自定义信息窗口运行，但它不会显示我的 cartobd 数据库中的变量（{{img}}和{{name}}）。

我找不到错误。如果有人可以帮助我，那就太好了。

我将所有 mapbox 和 cartodb css 和 js 包含在<head>

<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.uncompressed.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.standalone.js'></script>

这是信息窗口的脚本：

<script type="infowindow/html" id="infowindow_template">
    <div class="cartodb-popup v2">
        <a href="#close" class="cartodb-popup-close-button close">x</a>
        <div class="cartodb-popup-content-wrapper">
            <div class="cartodb-popup-header">
                <h1>Baumscheibe</h1>
            </div>
            <div class="cartodb-popup-content">
                <!-- content.data contains the field info -->
                <h3>Image:</h3> <img src="{{img}}">
                <h3>Gepflegt von: {{name}}</h3>
            </div>
        </div>
        <div class="cartodb-popup-tip-container"></div>
    </div>
</script>

这是地图图层的脚本：

<script>
   L.mapbox.accessToken = 'My MapBox access code';

   var southWest = L.latLng(52.510135, 13.284534)
       , northEast = L.latLng(52.559125, 13.400293)
       , bounds = L.latLngBounds(southWest, northEast);

   var map = L.map('map', {
       center: [52.5279664, 13.32686126]
       , maxBounds: bounds
       , zoom: 14
       , maxZoom: 20
       , minZoom: 14
   });

   map.fitBounds(bounds);


   var layers = {
       Streets: L.mapbox.tileLayer('svpvertex.ml8nijl4')
       , Imagery: L.mapbox.tileLayer('svpvertex.m0ammo9e')
   };

   layers.Streets.addTo(map);

   //add cartoDB layer, set z-index so it shows up on top
   cartodb.createLayer(map, 'My CartoDB access').addTo(map)
       .on('done', function (layer) {
           layer.setZIndex(5);
           // get sublayer 0 and set the infowindow template
           var sublayer = layer.getSubLayer(0);

           sublayer.infowindow.set('template', $('#infowindow_template').html());
       }).on('error', function () {
           console.log("some error occurred");
       });
</script>

如果有人可以帮助我，那就太好了！

4

1 回答 1

0

您的交互性似乎存在问题。

如果您使用编辑器，请记住在信息窗口上打开您需要的字段或设置自定义信息窗口，以便所有字段都可用。

如果您使用命名地图，请将这些字段添加到模板上的交互定义中。

于 2016-05-10T15:33:29.443 回答