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个人觉得稍微有些组件不够丰富完善,有些遗憾;但是基础功能是够用的,以及配置使用还是比较方便的