Не отображаются аннотации MapBox React Native GL

Я создаю приложение с помощью React Native и хочу использовать компонент MapBox GL для визуализации карты и добавления аннотаций. Я пытаюсь реализовать этот пример из репозиторий на гитхабе.

Я следовал инструкциям по установке, насколько это было возможно, но когда карта загружается, аннотаций там нет. Я получаю это:

введите здесь описание изображения

Эта ошибка в 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`.'

Я установил центр карты в то же положение, что и первая аннотация, поэтому он определенно должен быть в поле зрения.

Все остальные функции работают (центрирование карты, масштабирование и т. д.). Я также видел используемый здесь пример, и он работает (по крайней мере, на 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);

person matthewbeta    schedule 14.10.2015    source источник
comment
Я столкнулся с той же проблемой. Кажется, проблема с ключом координат.   -  person Jaec    schedule 17.11.2015


Ответы (1)


Есть ли ошибки в Xcode? Кроме того, было бы неплохо удалить ненужный код и просто попробовать добавить аннотации к карте.

Если бы вы также могли попробовать запустить свой код на игровой площадке React, я мог бы помочь отладить его лучше, вот пример: https://rnplay.org/apps/KR9WOw

person bsudekum    schedule 14.10.2015
comment
Привет. Обновили мой вопрос и разветвили ваш код. Вставьте мой код, и я не вижу маркеров, что говорит о том, что я делаю что-то не так. Код находится здесь: rnplay.org/apps/94SIyw - person matthewbeta; 14.10.2015
comment
Ага, сравнивая мой код с вашим, широта и долгота аннотации - это отдельные ключи на объекте. Мои представляют собой массив с ключом «координаты» (как, например, в репо). Сейчас я пойду и подправлю код приложения и отчитаюсь. Синтаксис изменился? - person matthewbeta; 14.10.2015
comment
Я обновил их в своем приложении и теперь вижу маркеры. Каков синтаксис для создания полилинии/многоугольника? Массив массивов координат не работает. (Спасибо за вашу помощь, кстати: D) - person matthewbeta; 14.10.2015
comment
@matthewbeta Интересно, ты понял, каков синтаксис для создания полилинии? - person Jaec; 17.11.2015
comment
@Jaec Пока нет. Собирался забрать его снова через несколько дней и еще раз посмотреть, были ли обновлены документы и т. Д., Но я думаю, что они не... - person matthewbeta; 18.11.2015
comment
Я воссоздал свой проект xcode, теперь используяcocopods для добавления компонента mapbox-gl, и теперь он работает с ключом координат. - person Jaec; 18.11.2015