如何使用MapBox和React Native将地图集中在单击的符号上? [英] How do you center the map on a clicked symbol using MapBox and React Native?

问题描述

花了很长时间尝试这样做:Mapbox在这里展示了如何做，但是我不确定它在React Native中是如何工作的: https://docs.mapbox.com/mapbox-gl -js/example/center-on-symbol/

Spent a long time trying to do this: Mapbox show how to do it here, but I'm unsure how it works in React Native: https://docs.mapbox.com/mapbox-gl-js/example/center-on-symbol/

我正在使用ShapeSource和SymboLayer，从geoJson获取标记.我似乎无法针对特定图标及其坐标.我已经尝试过类似的操作，但是它只是到第一个功能位置(而不是单击的特定图标的位置):

I'm using ShapeSource and SymboLayer, getting my markers from a geoJson. I can't seem to target the specific icon and its' coordinates. I've tried something like this, but it just takes be to the first feature location (not the location of the specific icon clicked):

onPress = {()=> {this._map.flyTo(featureCollection.features.geometry(0).coordinates，1000);}}

onPress={() => {this._map.flyTo(featureCollection.features.geometry(0).coordinates, 1000);}}

我的功能如下:

{ "type":"FeatureCollection"， 特征": [ { "type":功能"， "id":1 特性": { 名称":酒店"， "icon":睡觉" }， 几何学": { "type":"Point"， 坐标":[ 12.584664， 55.680532 ] } }， { "type":功能"， "id":2 特性": { 名称":餐厅"， "icon":食物" }， 几何学": { "type":"Point"， 坐标":[ 12.585264， 55.683441 ] } } }

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "id": 1, "properties": { "name": "Hotel", "icon": "sleep" }, "geometry": { "type": "Point", "coordinates": [ 12.584664, 55.680532 ] } }, { "type": "Feature", "id": 2, "properties": { "name": "Restaurant", "icon": "food" }, "geometry": { "type": "Point", "coordinates": [ 12.585264, 55.683441 ] } } }

谢谢！

推荐答案

我想我已经找到了一个可行的答案，但是如果您有更好的答案，请纠正我:

I think I've found a working answer to this, but please correct me if you have a better answer:

constructor(props) {
    super(props);
    this.onPress = this.onPress.bind(this);
  }

  async onPress(e) {
    const feature = e.nativeEvent.payload;
    this.map.flyTo(feature.geometry.coordinates, 1000);

这篇关于如何使用MapBox和React Native将地图集中在单击的符号上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！