react-native-amap3d
react-native-amap3d copied to clipboard
iOS onLoad方法没有调用
第一次进去
定位某个点
再全览:
我是等所有数据都有了之后才加载地图的mapViews
mapViews = (
<View style={styles.mapView}>
<MapView
ref={(ref) => (this.mapView = ref)}
style={styles.mapView}
onCameraIdle={({nativeEvent}) => {
//地图状态改变事件,在停止变化后触发
console.log('onCameraIdle===', nativeEvent);
this.status = nativeEvent;
this.cluster?.update(nativeEvent);
}}
onLoad={() => {
console.log('onLoad===', this.location);
this.mapView?.moveCamera({target: this.location, zoom: 9}, 20);
}}
onLocation={() => {
console.log('onLocation');
}}
onCameraMove={() => {
// console.log('onCameraMove');
}}
onPressPoi={(event) => {
//标注点击事件
console.log('onPressPoi');
}}
onPress={(event) => {
//点击事件
console.log('onPress===');
}}
mapType={MapType.Standard}
// scrollGesturesEnabled={false} //是否启用滑动手势,用于平移
tiltGesturesEnabled={false} //是否启用倾斜手势,用于改变视角
rotateGesturesEnabled={false} //是否启用旋转手势,用于调整方向
zoomControlsEnabled={true} //是否显示放大缩小按钮android
// zoomGesturesEnabled={false} //是否启用缩放手势,用于放大缩小
// myLocationEnabled={true}
initialCameraPosition={{
target: this.location,
zoom: 9,
}}>
{markControl}
{/* <Cluster
onPress={({position}) => {
console.log('Cluster===', position);
this.mapView?.moveCamera(
{
target: position,
zoom: this.status.cameraPosition.zoom + 1,
},
20,
);
}}
ref={(ref) => (this.cluster = ref)}
points={markers}
renderMarker={(item) => (
<Marker
key={item.properties.key}
// icon={require('../res/img/ic_current_location_marker.png')}
position={item.position}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<Image
style={{
width: 36,
height: 36,
}}
source={{uri: mapMarkImg}}
/>
<Text
style={{
color: '#498FF7',
fontSize: 14,
position: 'absolute',
top: 3,
}}>
{item.code}
</Text>
</View>
</Marker>
)}
/> */}
</MapView>
</View>
);
我目前的demo只用到了6个markers的map循环,我尝试一个也没用, 最后发现Marker组件下面的设置icon能直接显示,自定义的children下的组件就不容易渲染,我目前先放个占位的空白icon😂
作者提到的:
// 如果主线程占用太多计算资源,会导致 ios onLoad 事件无法触发,非常蛋疼
// 暂时想到的解决办法是等一个事件循环
我也在ios上遇到这个问题了 现在还没解决吗 @qiuxiang
同样的问题, ios下 onLoad 没有回调