看不到 MapBox React Native GL 注释
Can't see MapBox React Native GL annotations
我正在使用 React Native 构建应用程序并希望使用 github 存储库中的 MapBox GL Component to render a map and add annotations. I am trying to implement this example。
我已尽我所能按照安装说明进行操作，但是当加载地图时，注释不存在。我明白了：
Xcode 中出现此错误（3 次）：
Oct 14 20:45:08 MapBoxDemo[9268] <Error>: CGContextRestoreGState: invalid context 0x0. Backtrace:
<-[UIStatusBarItemView updateContentsAndWidth]+33>
<-[UIStatusBarItemView initWithItem:data:actions:style:]+477>
<+[UIStatusBarItemView createViewForItem:withData:actions:foregroundStyle:]+134>
<-[UIStatusBarLayoutManager _createViewForItem:withData:actions:]+163>
<-[UIStatusBarLayoutManager _prepareEnabledItemType:withEnabledItems:withData:actions:itemAppearing:itemDisappearing:]+36
<-[UIStatusBarLayoutManager prepareEnabledItems:withData:actions:]+92>
<-[UIStatusBarForegroundView _setStatusBarData:actions:animated:]+797>
<-[UIStatusBarForegroundView setStatusBarData:actions:animated:]+332>
<__51-[UIStatusBar _prepareToSetStyle:animation:forced:]_block_invoke+360>
<+[UIView(Animation) performWithoutAnimation:]+65>
<-[UIStatusBar _prepareToSetStyle:animation:forced:]+866>
<-[UIStatusBar _requestStyleAttributes:animationParameters:forced:]+391>
<-[UIStatusBar requestStyle:animationParameters:forced:]+437>
<-[UIStatusBar requestStyle:animated:forced:]+90>
<-[UIStatusBar _evaluateServerRegistration]+250>
<__45-[UIView(Hierarchy) _postMovedFromSuperview:]_block_invoke+590>
<-[UIView(Hierarchy) _postMovedFromSuperview:]+544>
<-[UIView(Internal) _addSubview:positioned:relativeTo:]+1967>
<-[UIStatusBarWindow setStatusBar:]+288>
<-[UIApplication _createStatusBarWithRequestedStyle:orientation:hidden:]+340>
<-[UIApplication _runWithMainScene:transitionContext:completion:]+950>
<-[UIApplication workspaceDidEndTransaction:]+188>
<-[FBSSerialQueue _performNext]+192>
<-[FBSSerialQueue _performNextFromRunLoopSource]+45>
<__CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__+17>
<__CFRunLoopDoSources0+556>
<__CFRunLoopRun+867>
<CFRunLoopRunSpecific+488>
<-[UIApplication _run]+402>
<UIApplicationMain+171>
<main+111>
<start+1>
还有这个（只有一次）：
2015-10-14 20:45:09.328 [warn][tid:com.facebook.React.JavaScript] 'Warning: Failed propType: typeChecker is not a function. (In \'typeChecker(\npropValue,\ni,\ncomponentName,\nlocation,\npropFullName + \'[\' + i + \']\')\', \'typeChecker\' is undefined) Check the render method of `MapBoxDemo`.'
我已将地图中心设置为与第一个注释相同的位置，因此它应该清晰可见。
所有其他功能似乎都可用（重新定位地图、缩放等）。我也看到了 example used here 并且它有效（至少在 iOS 8 上）。
有什么想法吗？会不会和iOS9有关？我的代码如下：
'use strict';
var React = require('react-native');
var MapboxGLMap = require('react-native-mapbox-gl');
var mapRef = 'mapRef';
var {
AppRegistry,
StyleSheet,
Text,
StatusBarIOS,
View
} = React;
var MapBoxDemo = React.createClass({
mixins: [MapboxGLMap.Mixin],
getInitialState() {
return {
center: {
latitude: 40.72052634,
longitude: -73.97686958312988
},
zoom: 11,
annotations: [{
coordinates: [40.72052634, -73.97686958312988],
"type": "point",
title: 'This is marker 1',
subtitle: 'It has a rightCalloutAccessory too',
rightCalloutAccessory: {
url: 'https://cldup.com/9Lp0EaBw5s.png',
height: 25,
width: 25
},
annotationImage: {
url: 'https://cldup.com/CnRLZem9k9.png',
height: 25,
width: 25
},
id: 'marker1'
}, {
coordinates: [40.714541341726175,-74.00579452514648],
"type": "point",
title: 'Important!',
subtitle: 'Neat, this is a custom annotation image',
annotationImage: {
url: 'https://cldup.com/7NLZklp8zS.png',
height: 25,
width: 25
},
id: 'marker2'
}, {
"coordinates": [[40.76572150042782,-73.99429321289062],[40.743485405490695, -74.00218963623047],[40.728266950429735,-74.00218963623047],[40.728266950429735,-73.99154663085938],[40.73633186448861,-73.98983001708984],[40.74465591168391,-73.98914337158203],[40.749337730454826,-73.9870834350586]],
"type": "polyline",
"strokeColor": "#00FB00",
"strokeWidth": 4,
"strokeAlpha": .5,
"id": "foobar"
}, {
"coordinates": [[40.749857912194386, -73.96820068359375], [40.741924698522055,-73.9735221862793], [40.735681504432264,-73.97523880004883], [40.7315190495212,-73.97438049316406], [40.729177554196376,-73.97180557250975], [40.72345355209305,-73.97438049316406], [40.719290332250544,-73.97455215454102], [40.71369559554873,-73.97729873657227], [40.71200407096382,-73.97850036621094], [40.71031250340588,-73.98691177368163], [40.71031250340588,-73.99154663085938]],
"type": "polygon",
"fillAlpha":1,
"strokeColor": "#fffff",
"fillColor": "blue",
"id": "zap"
}]
};
},
render: function() {
StatusBarIOS.setHidden(true);
return (
<View style={styles.container}>
<Text style={styles.text} onPress={() => this.addAnnotations(mapRef, [{
coordinates: [40.73312,-73.989],
type: 'point',
title: 'This is a new marker',
id: 'foo'
}, {
"coordinates": [[40.749857912194386, -73.96820068359375], [40.741924698522055,-73.9735221862793], [40.735681504432264,-73.97523880004883], [40.7315190495212,-73.97438049316406], [40.729177554196376,-73.97180557250975], [40.72345355209305,-73.97438049316406], [40.719290332250544,-73.97455215454102], [40.71369559554873,-73.97729873657227], [40.71200407096382,-73.97850036621094], [40.71031250340588,-73.98691177368163], [40.71031250340588,-73.99154663085938]],
"type": "polygon",
"fillAlpha": 1,
"fillColor": "#000",
"strokeAlpha": 1,
"id": "new-black-polygon"
}])}>
Add new marker
</Text>
<Text style={styles.text} onPress={() => this.selectAnnotationAnimated(mapRef, 0)}>
Open first popup
</Text>
<Text style={styles.text} onPress={() => this.removeAnnotation(mapRef, 0)}>
Remove first annotation
</Text>
<MapboxGLMap
style={styles.map}
direction={0}
rotateEnabled={true}
scrollEnabled={true}
zoomEnabled={true}
showsUserLocation={true}
ref={mapRef}
accessToken={'pk.eyJ1IjoibWF0dGhld2JldGEiLCJhIjoiY2lmcGZxdnpnMDFqOXVlbHllazRwcWxqZSJ9.M0lbiLNHcd-WT-Ps_MkCvA'}
styleURL={'asset://styles/streets-v8.json'}
centerCoordinate={this.state.center}
userLocationVisible={true}
zoomLevel={this.state.zoom}
onRegionChange={this.onRegionChange}
onRegionWillChange={this.onRegionWillChange}
annotations={this.state.annotations}
onOpenAnnotation={this.onOpenAnnotation}
onRightAnnotationTapped={this.onRightAnnotationTapped}
onUpdateUserLocation={this.onUpdateUserLocation} />
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1
},
map: {
flex: 1
},
text: {
padding: 3
}
});
AppRegistry.registerComponent('MapBoxDemo', () => MapBoxDemo);
Xcode有没有错误？此外，从中删除不必要的代码并尝试向地图添加注释可能是个好主意。
如果你也可以尝试 运行 你在 React playground 上的代码，我也许可以帮助更好地调试它，这里是一个例子：https://rnplay.org/apps/KR9WOw
我正在使用 React Native 构建应用程序并希望使用 github 存储库中的 MapBox GL Component to render a map and add annotations. I am trying to implement this example。
我已尽我所能按照安装说明进行操作，但是当加载地图时，注释不存在。我明白了：
Xcode 中出现此错误（3 次）：
Oct 14 20:45:08 MapBoxDemo[9268] <Error>: CGContextRestoreGState: invalid context 0x0. Backtrace:
<-[UIStatusBarItemView updateContentsAndWidth]+33>
<-[UIStatusBarItemView initWithItem:data:actions:style:]+477>
<+[UIStatusBarItemView createViewForItem:withData:actions:foregroundStyle:]+134>
<-[UIStatusBarLayoutManager _createViewForItem:withData:actions:]+163>
<-[UIStatusBarLayoutManager _prepareEnabledItemType:withEnabledItems:withData:actions:itemAppearing:itemDisappearing:]+36
<-[UIStatusBarLayoutManager prepareEnabledItems:withData:actions:]+92>
<-[UIStatusBarForegroundView _setStatusBarData:actions:animated:]+797>
<-[UIStatusBarForegroundView setStatusBarData:actions:animated:]+332>
<__51-[UIStatusBar _prepareToSetStyle:animation:forced:]_block_invoke+360>
<+[UIView(Animation) performWithoutAnimation:]+65>
<-[UIStatusBar _prepareToSetStyle:animation:forced:]+866>
<-[UIStatusBar _requestStyleAttributes:animationParameters:forced:]+391>
<-[UIStatusBar requestStyle:animationParameters:forced:]+437>
<-[UIStatusBar requestStyle:animated:forced:]+90>
<-[UIStatusBar _evaluateServerRegistration]+250>
<__45-[UIView(Hierarchy) _postMovedFromSuperview:]_block_invoke+590>
<-[UIView(Hierarchy) _postMovedFromSuperview:]+544>
<-[UIView(Internal) _addSubview:positioned:relativeTo:]+1967>
<-[UIStatusBarWindow setStatusBar:]+288>
<-[UIApplication _createStatusBarWithRequestedStyle:orientation:hidden:]+340>
<-[UIApplication _runWithMainScene:transitionContext:completion:]+950>
<-[UIApplication workspaceDidEndTransaction:]+188>
<-[FBSSerialQueue _performNext]+192>
<-[FBSSerialQueue _performNextFromRunLoopSource]+45>
<__CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__+17>
<__CFRunLoopDoSources0+556>
<__CFRunLoopRun+867>
<CFRunLoopRunSpecific+488>
<-[UIApplication _run]+402>
<UIApplicationMain+171>
<main+111>
<start+1>
还有这个（只有一次）：
2015-10-14 20:45:09.328 [warn][tid:com.facebook.React.JavaScript] 'Warning: Failed propType: typeChecker is not a function. (In \'typeChecker(\npropValue,\ni,\ncomponentName,\nlocation,\npropFullName + \'[\' + i + \']\')\', \'typeChecker\' is undefined) Check the render method of `MapBoxDemo`.'
我已将地图中心设置为与第一个注释相同的位置，因此它应该清晰可见。
所有其他功能似乎都可用（重新定位地图、缩放等）。我也看到了 example used here 并且它有效（至少在 iOS 8 上）。
有什么想法吗？会不会和iOS9有关？我的代码如下：
'use strict';
var React = require('react-native');
var MapboxGLMap = require('react-native-mapbox-gl');
var mapRef = 'mapRef';
var {
AppRegistry,
StyleSheet,
Text,
StatusBarIOS,
View
} = React;
var MapBoxDemo = React.createClass({
mixins: [MapboxGLMap.Mixin],
getInitialState() {
return {
center: {
latitude: 40.72052634,
longitude: -73.97686958312988
},
zoom: 11,
annotations: [{
coordinates: [40.72052634, -73.97686958312988],
"type": "point",
title: 'This is marker 1',
subtitle: 'It has a rightCalloutAccessory too',
rightCalloutAccessory: {
url: 'https://cldup.com/9Lp0EaBw5s.png',
height: 25,
width: 25
},
annotationImage: {
url: 'https://cldup.com/CnRLZem9k9.png',
height: 25,
width: 25
},
id: 'marker1'
}, {
coordinates: [40.714541341726175,-74.00579452514648],
"type": "point",
title: 'Important!',
subtitle: 'Neat, this is a custom annotation image',
annotationImage: {
url: 'https://cldup.com/7NLZklp8zS.png',
height: 25,
width: 25
},
id: 'marker2'
}, {
"coordinates": [[40.76572150042782,-73.99429321289062],[40.743485405490695, -74.00218963623047],[40.728266950429735,-74.00218963623047],[40.728266950429735,-73.99154663085938],[40.73633186448861,-73.98983001708984],[40.74465591168391,-73.98914337158203],[40.749337730454826,-73.9870834350586]],
"type": "polyline",
"strokeColor": "#00FB00",
"strokeWidth": 4,
"strokeAlpha": .5,
"id": "foobar"
}, {
"coordinates": [[40.749857912194386, -73.96820068359375], [40.741924698522055,-73.9735221862793], [40.735681504432264,-73.97523880004883], [40.7315190495212,-73.97438049316406], [40.729177554196376,-73.97180557250975], [40.72345355209305,-73.97438049316406], [40.719290332250544,-73.97455215454102], [40.71369559554873,-73.97729873657227], [40.71200407096382,-73.97850036621094], [40.71031250340588,-73.98691177368163], [40.71031250340588,-73.99154663085938]],
"type": "polygon",
"fillAlpha":1,
"strokeColor": "#fffff",
"fillColor": "blue",
"id": "zap"
}]
};
},
render: function() {
StatusBarIOS.setHidden(true);
return (
<View style={styles.container}>
<Text style={styles.text} onPress={() => this.addAnnotations(mapRef, [{
coordinates: [40.73312,-73.989],
type: 'point',
title: 'This is a new marker',
id: 'foo'
}, {
"coordinates": [[40.749857912194386, -73.96820068359375], [40.741924698522055,-73.9735221862793], [40.735681504432264,-73.97523880004883], [40.7315190495212,-73.97438049316406], [40.729177554196376,-73.97180557250975], [40.72345355209305,-73.97438049316406], [40.719290332250544,-73.97455215454102], [40.71369559554873,-73.97729873657227], [40.71200407096382,-73.97850036621094], [40.71031250340588,-73.98691177368163], [40.71031250340588,-73.99154663085938]],
"type": "polygon",
"fillAlpha": 1,
"fillColor": "#000",
"strokeAlpha": 1,
"id": "new-black-polygon"
}])}>
Add new marker
</Text>
<Text style={styles.text} onPress={() => this.selectAnnotationAnimated(mapRef, 0)}>
Open first popup
</Text>
<Text style={styles.text} onPress={() => this.removeAnnotation(mapRef, 0)}>
Remove first annotation
</Text>
<MapboxGLMap
style={styles.map}
direction={0}
rotateEnabled={true}
scrollEnabled={true}
zoomEnabled={true}
showsUserLocation={true}
ref={mapRef}
accessToken={'pk.eyJ1IjoibWF0dGhld2JldGEiLCJhIjoiY2lmcGZxdnpnMDFqOXVlbHllazRwcWxqZSJ9.M0lbiLNHcd-WT-Ps_MkCvA'}
styleURL={'asset://styles/streets-v8.json'}
centerCoordinate={this.state.center}
userLocationVisible={true}
zoomLevel={this.state.zoom}
onRegionChange={this.onRegionChange}
onRegionWillChange={this.onRegionWillChange}
annotations={this.state.annotations}
onOpenAnnotation={this.onOpenAnnotation}
onRightAnnotationTapped={this.onRightAnnotationTapped}
onUpdateUserLocation={this.onUpdateUserLocation} />
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1
},
map: {
flex: 1
},
text: {
padding: 3
}
});
AppRegistry.registerComponent('MapBoxDemo', () => MapBoxDemo);
Xcode有没有错误？此外，从中删除不必要的代码并尝试向地图添加注释可能是个好主意。
如果你也可以尝试 运行 你在 React playground 上的代码，我也许可以帮助更好地调试它，这里是一个例子：https://rnplay.org/apps/KR9WOw