react-native-baidu-map icon indicating copy to clipboard operation
react-native-baidu-map copied to clipboard

请问一下如何实现移动地图后,点击按钮回到我的位置的功能?

Open xy371661665 opened this issue 6 years ago • 2 comments

xy371661665 avatar Dec 31 '19 10:12 xy371661665

同问

stupidream avatar Jan 06 '20 02:01 stupidream

  1. 点击触发

import { Geolocation } from 'react-native-baidu-map'

<TouchableOpacity onPress={() => {
	Geolocation.getCurrentPosition()
		.then(result =>
		{
			this.setState({
				coordinate: result,
				newCoordinate: result,
				userCoordinate: result,
			})
		})
}}>
	<Text>Refresh</Text>
</TouchableOpacity>
  1. 更新到地图
<MapView
	style={styles.container}
	center={this._transform(coordinate)}
	zoom={18}
>
	{(Platform.OS === 'ios' && coordinate && coordinate.latitude && coordinate.longitude) &&
		<Overlay.Marker location={transform(this.state.coordinate)} />
	}

	{(Platform.OS === 'android' && newCoordinate && newCoordinate.latitude && newCoordinate.longitude) &&
		<Overlay.Marker location={this.state.newCoordinate} />
	}
</MapView>

为什么我要区分iOS和Android对marker的更新,因为当前的版本不能直接对iOS修改坐标达到修改所在地图的位置,请参考 #319

iOS得到的经纬度放到百度地图上,需要对经纬度转换 (Android不需要转换) gcoord':

import gcoord from 'gcoord'

transform(coordinate)
{
	var result = gcoord.transform(
		[coordinate.latitude, coordinate.longitude], // 经纬度坐标
		gcoord.WGS84, // 当前坐标系
		gcoord.BD09,   // 目标坐标系
	)
	return { latitude: result[0], longitude: result[1] }
}

objczl avatar Jan 20 '20 03:01 objczl