使用高德地圖前先要申請一個(gè) Key，具體步驟就不再贅述了
AMapView.h
#import <UIKit/UIKit.h>
#import <MAMapKit/MAMapKit.h>
#import <AMapFoundationKit/AMapFoundationKit.h>
#import <React/RCTView.h>
@class RCTEventDispatcher;
@interface AMapView: RCTView;
@end
AMapView.m
#import "AMapView.h"
#import "AMapViewController.h"
@interface AMapView ()
@property (nonatomic, strong) AMapViewController * amapVC;
@end
@implementation AMapView
- (instancetype)init
{
if ((self = [super init])) {
[AMapServices sharedServices].apiKey = @"你的高德 Key";
[AMapServices sharedServices].enableHTTPS = YES;
AMapViewController * amapVC = [[AMapViewController alloc] init];
self.amapVC = amapVC;
[self addSubview:amapVC.view];
}
return self;
}
@end
AMapViewController.h
#import <UIKit/UIKit.h>
#import <MAMapKit/MAMapKit.h>
#import <AMapFoundationKit/AMapFoundationKit.h>
@interface AMapViewController : UIViewController
@end
AMapViewController.m
#import "AMapViewController.h"
@implementation AMapViewController
- (void)viewDidLoad {
[super viewDidLoad];
/// 初始化地圖
MAMapView *_mapView = [[MAMapView alloc] initWithFrame:self.view.bounds];
/// 把地圖添加至view
[self.view addSubview:_mapView];
/// 顯示定位小藍(lán)點(diǎn)
_mapView.showsUserLocation = YES;
_mapView.userTrackingMode = MAUserTrackingModeFollow;
/// 顯示室內(nèi)地圖
_mapView.showsIndoorMap = YES;
/// 地圖縮放等級
[_mapView setZoomLevel:18 animated:YES];
[_mapView setUserTrackingMode:MAUserTrackingModeFollowWithHeading animated:YES];
}
@end
AMapViewManager.h
#import <React/RCTViewManager.h>
@interface AMapViewManager : RCTViewManager
@end
AMapViewManager.m
#import "AMapViewManager.h"
#import "React/RCTBridge.h"
#import "React/RCTEventDispatcher.h"
#import "AMapView.h"
@implementation AMapViewManager
RCT_EXPORT_MODULE()
- (UIView *)view
{
AMapView *map = [[AMapView alloc] init];
return map;
}
@end
AMap.js
import { requireNativeComponent } from 'react-native'
export default requireNativeComponent('AMapView', null)
在其他頁面里就可以使用這個(gè)組件啦
import React from 'react'
import AMap from './AMap'
import { View } from 'react-native'
export default class AMapDemo extends React.Component {
render() {
return (
<View>
<AMap/>
</View>
)
}
}
這里有個(gè)問題兄旬，如果我不給 AMap 設(shè)置 width: 1，也就是上圖中攻礼，AMap 的實(shí)際寬度其實(shí)是兩倍于當(dāng)前屏幕的，通過 inspector 可以看的到。不知道是什么原因，希望有了解的可以在評論中告訴我迁杨，感謝。
