React-Native (iOS) 中的谷歌地图

Posted

技术标签:

【中文标题】React-Native (iOS) 中的谷歌地图【英文标题】:Google Maps in React-Native (iOS) 【发布时间】:2016-04-29 07:04:17 【问题描述】:

我的目标是在 React Native 中显示谷歌地图。我已经看到使用带有 UIMapView 或 MapBox 地图的 Google Maps SDK 的示例,但这不是我想要的。

我目前没有错误。这是我的代码:

index.ios.js

'use strict';
import React, 
    AppRegistry,
    Component,
    StyleSheet,
    Text,
    View
 from 'react-native';
import GoogleMaps from './ios/GoogleMaps.js';

class RCTGoogleMaps extends Component 
    constructor(props) 
        super(props);
    

    render() 
        return (
            <View style=styles.container>
                <GoogleMaps style=styles.map/>
            </View>
        );
    


const styles = StyleSheet.create(
    container: 
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    ,
    map: 
        height: 500,
        width: 300,
        marginLeft: 50
    
);

AppRegistry.registerComponent('RCTGoogleMaps', () => RCTGoogleMaps);

ios/GoogleMaps.js

var requireNativeComponent = require('react-native');
module.exports = requireNativeComponent('RCTGoogleMapViewManager', null);

ios/RCTGoogleMapViewManager.h

#ifndef RCTGoogleMapViewManager_h
#define RCTGoogleMapViewManager_h

#import <Foundation/Foundation.h>
#import "RCTViewManager.h"
#import <UIKit/UIKit.h>

@interface RCTGoogleMapViewManager : RCTViewManager<UITextViewDelegate>
@end

#endif /* RCTGoogleMapViewManager_h */

ios/GoogleMapViewManager.m

#import <Foundation/Foundation.h>
#import "RCTGoogleMapViewManager.h"
#import "RCTBridge.h"
#import "RCTEventDispatcher.h"
#import "UIView+React.h"
@import GoogleMaps;

@implementation RCTGoogleMapViewManager
  RCT_EXPORT_MODULE()

- (UIView *)view 
  GMSMapView *mapView_;
  // Create a GMSCameraPosition that tells the map to display the
  // coordinate -33.86,151.20 at zoom level 6.
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                          longitude:151.20
                                                               zoom:6];
  mapView_ = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  mapView_.myLocationEnabled = YES;
  UIView *newView_ = mapView_;
  //self.view = mapView_;

  // Creates a marker in the center of the map.
  GMSMarker *marker = [[GMSMarker alloc] init];
  marker.position = CLLocationCoordinate2DMake(-33.86, 151.20);
  marker.title = @"Sydney";
  marker.snippet = @"Australia";
  marker.map = mapView_;
  return newView_;


RCT_EXPORT_VIEW_PROPERTY(text, NSString)

@end

组件周围有一个红色边框,但内部没有任何显示。我是 React Native 的新手,也是 *** 的新手。不幸的是,在我获得更多声誉之前,他们不会让我上传屏幕截图。

我怀疑有一条线路已关闭,但不知道将其更改为什么。 RCTGoogleMapViewManager.h 中的第 8 行显示“@interface RCTGoogleMapViewManager : RCTViewManager”。我已将 UITextViewDelegates 用于其他自定义组件,但此地图不是 TextView。可能是这样,但我不知道。

任何帮助都将不胜感激。

【问题讨论】:

【参考方案1】:

如果组件周围有红色边框但内部没有显示,则表示您没有正确链接库。

在此处查看文档: http://facebook.github.io/react-native/releases/0.25/docs/linking-libraries-ios.html

【讨论】:

【参考方案2】:

您查看https://github.com/peterprokop/ReactNativeGoogleMaps 了吗?它看起来相当初步,但对你来说应该还是很有用的。

【讨论】:

以上是关于React-Native (iOS) 中的谷歌地图的主要内容,如果未能解决你的问题,请参考以下文章

如何在 ios 应用程序中的谷歌地图上添加多个引脚

如何将 iOS 中的谷歌地图导航集成到我们的应用程序中? [复制]

如何从 ionic 2 中的谷歌地图获取纬度和经度?

使用适用于 iOS 的谷歌地图 SDK 进行标记聚类?

用于 Flutter iOS Swift 设置的谷歌地图

sencha 中的谷歌地图处理