Question

我想以某种方式在Mapbox中设置我的弹出窗口样式（参见示例），但我不确定如何从简单的标题和文本，到图像和表格等等。我已经尝试过了将我的html代码放在.setHTML下，但这似乎不是这样做的。如果有人能为我提供最好的方法指导，我真的很感激。

我没有编码专家所以我可能需要一些内部解释。提前谢谢。

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Points on a map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.css' rel='stylesheet' />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id='map'></div>
    <script>
    mapboxgl.accessToken = 'token'; // replace this with your access token
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'style-url' // replace this with your style URL
    });
    map.on('click', function(e) {
  var features = map.queryRenderedFeatures(e.point, {
    layers: ['visitors'] // replace this with the name of the layer
  });

  if (!features.length) {
    return;
  }

  var feature = features[0];

  var popup = new mapboxgl.Popup({ offset: [0, -15] })
    .setLngLat(feature.geometry.coordinates)
    .setHTML('<h3>' + feature.properties.title + '</h3><p>' + feature.properties.visitors + '</p>')
    .setLngLat(feature.geometry.coordinates)
    .addTo(map);
});
    </script>
  </body>
</html>

Mapbox中的样式弹出窗口（表格和图像）

0 个答案: