最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - how to create a overlay marker on map which stays is center of the screen in react-native - Stack Overflow

programmeradmin2浏览0评论

hey i am trying to add overlay marker which stays in center of the screen like this even if we scroll or zoom the screen

i tried moving marker from its initial position but it lags behind when we move screen fast. so i want to set marker image in the center of the screen

here is the code what i have done to move marker:

ponentDidMount: function() {
    this.fetchData();
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          region: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA
          }
        });
      },
    );
    this.watchID = navigator.geolocation.watchPosition((position) => {
      const newRegion = {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      }

      this.onRegionChange(newRegion);
    });

  },

  ponentWillUnmount: function() {
    navigator.geolocation.clearWatch(this.watchID);
  },

  onRegionChange(region) {
    this.setState({ region });
  },

so how can i overlay a marker image?

hey i am trying to add overlay marker which stays in center of the screen like this even if we scroll or zoom the screen

i tried moving marker from its initial position but it lags behind when we move screen fast. so i want to set marker image in the center of the screen

here is the code what i have done to move marker:

ponentDidMount: function() {
    this.fetchData();
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          region: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA
          }
        });
      },
    );
    this.watchID = navigator.geolocation.watchPosition((position) => {
      const newRegion = {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      }

      this.onRegionChange(newRegion);
    });

  },

  ponentWillUnmount: function() {
    navigator.geolocation.clearWatch(this.watchID);
  },

  onRegionChange(region) {
    this.setState({ region });
  },

so how can i overlay a marker image?

Share Improve this question asked Jul 21, 2016 at 9:49 atifatif 7694 gold badges13 silver badges25 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 7

I see two options to solve this issue:

The MapView way

Just add a MapView.Marker with the position of your region variable:

  <MapView
    style={styles.map}
    region={this.state.region}
    onRegionChange={this.onRegionChange.bind(this)}>
    <MapView.Marker
      coordinate={{latitude: this.state.region.latitude, longitude: this.state.region.longitude}}
    />
  </MapView>

In my opinion this is the "correct" way, though I face the issue, that the Marker updates its position with a small delay: As I move the map, it stays on its position in respect to the map and a after a few hundred milliseconds it jumps back to the center of the map (suggestions on how to debug or fix this issue are very wele).

The second option overes this issue

The Icon way

Put your MapView inside a View, that fills the whole space. Inside the View add a centered Icon and your map:

<View style={StyleSheet.absoluteFillObject}>
  <Icon name="map-marker" 
    style={{    
      zIndex: 3,
      position: 'absolute',
      marginTop: -37,
      marginLeft: -11,
      left: '50%',
      top: '50%'}} 
    size={40}
    color="#f00" />
  <MapView
    style={StyleSheet.absoluteFillObject}
    region={this.state.region}
    onRegionChange={this.onRegionChange.bind(this)}>
  </MapView>
</View>

Note the use of zIndex to overlay it in front of the MapView and marginTop/marginLeft which can be used to place the needletip of the marker on the center.

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论