Question

我正在努力为Mapbox地图上的点添加click事件。我必须将来自后端sql查询的源添加到hbs模板中。我尝试过仅将business1添加为源，而没有for循环，但收到无效的geojson对象警告。如果我只添加“位置”作为ID，显然会警告我该ID已存在于地图上。

那么我如何为动态ID添加onclick调用？

我如何加载积分

 const columns = [{
        Header: 'Name',
        accessor: 'name' // String-based value accessors!
      }, {
        Header: 'Age',
        accessor: 'age',
        Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
      }, {
        id: 'friendName', // Required because our accessor is not a string
        Header: 'Friend Name',
        accessor: d => d.friend.name // Custom value accessors!
      }, {
        Header: props => <span>Friend Age</span>, // Custom header components!
        a

ccessor: 'friend.age'
  }]

如何调用地图点击-加上[i]只是为了显示我的想法

business1 = {{{businesses}}}

for(i=0;i<business1.length;i++){
  // Add the data to your map as a lyer
  map.addLayer({
    id: 'locations'+[i],
    type: 'symbol',
   minzoom: zoomThreshold,
    // Add a GeoJSON source containing place coordinates and information.
    source: {
      type: 'geojson',
      data: business1[i]
    },
    layout: {
      'icon-image': 'circle-stroked-15',
      'icon-allow-overlap': true,
    }
  });

}

我还尝试了什么，但是无论单击什么，总是返回相同的位置

map.on('click', function(e) {

  var features = map.queryRenderedFeatures(e.point, {
    layers: ['locations'+[i]] // replace this with the name of the layer
  });

  if (!features.length) {
    return;
  }

Answer 1

我绝对不建议为每个业务添加新的源/层。如果您有一堆图层，那将不会有什么效果，我认为这会增加点击逻辑的复杂性。

我尝试仅将business1添加为源，而没有for循环，但收到无效的geojson对象警告。

这有力地表明，在将业务数据添加到地图并担心点击事件之前，应先解决一些问题。我建议使用http://geojsonlint.com/之类的工具来查看发生了什么。

一旦您拥有有效的geojson，向您的图标添加点击事件将变得更加容易。 https://docs.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures-around-point/

⚠️免责声明：我目前在Mapbox⚠️

工作

为地图框图标添加onclick调用

1 个答案: