react native中地圖組件的選擇(react-native-amap3d)

需求 : react-native項目中需要使用高德地圖組件;有基本的軌跡以及marker功能;

• react-native-amap-geolocation
• react-native-smart-amap
• react-native-amap3d
• react-native-maps
  …
  對比了一些,感覺比較全的還是react-native-community的react-native-maps ;but沒找到其可以使用高德地圖,只能使用Google map?!!於是,只好選其他的了,最終選擇了eact-native-amap3d,效果以及簡單使用如下:
  

import React, {Component} from 'react';
import {Platform, StyleSheet, View} from 'react-native';
import { MapView,Marker,Polyline,Polygon } from 'react-native-amap3d';

var Dimensions = require('Dimensions');
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;



class CarDetailsPage extends Component {
  constructor(props) {
    super(props);
    console.disableYellowBox = true;
    this.state = {
    //****
    };
  }
  componentWillMount () {  
  }

 
  render() {  
    return (
      <Container>
        <View style={{ flex: 1 }}>
          <MapView
            draggable
              coordinate={ {
                  latitude: 40.006901,
                  longitude: 116.097972,
                }}
              mapType={'standard'}
              zoomLevel={12}
              zoomEnabled={true}
              scrollEnabled={true}
              rotateEnabled={true}
              style={styles.mapStyles}
              showsZoomControls={false}
              zoomLevel={15}
          >      
    
			//畫marker 
            <Marker 
              key={navigation.getParam('currentCarName','')}
              active
              title={navigation.getParam('currentCarName','')}
              color='blue'
              description={'battery:'+this.props.carwebsocket.carstatus.battery}
              coordinate={ {
                  latitude: 40.006901,
                  longitude: 116.097972,
                }}/>
                 
        	
        	//畫框
            <Polygon 
            coordinates={gps} 
            fillColor={'transparent'} 
            strokeColor={'#1398E2'} 
            strokeWidth={4}
            ></Polygon>  
                 
            //畫線條
            <Polyline
              width={10}
              color='rgba(255, 0, 0, 0.5)'
              
              coordinates={[
                {
                  latitude: 40.006901,
                  longitude: 116.097972,
                },
                {
                  latitude: 40.006901,
                  longitude: 116.597972,
                },
                {
                  latitude: 39.706901,
                  longitude: 116.597972,
                },
              ]}
            />      
           

          </MapView>
         
  

         </View>
      </Container>
    );
  }
}
const styles = {
  mapStyles:{
    height:deviceHeight,
    width:deviceWidth
  }
}

export default CarDetailsPage;

雖然react-native-amap3d個人覺得稍微有些組件不夠豐富完善,有些遺憾;但是基礎功能是夠用的,以及配置使用還是比較方便的