美文网首页react nativereact-native
reactnative 高德地图(react-native-am

reactnative 高德地图(react-native-am

作者: 荣智超 | 来源:发表于2018-02-24 13:42 被阅读320次

    1.首先安装配置

    npm i react-native-amap3d
    react-native link react-native-amap3d
    

    2.在AndroidManifest.xml 文件中添加key

    <application>
      <meta-data
        android:name="com.amap.api.v2.apikey"
        android:value="你的高德 Key" />
    </application>
    

    3.在js 文件中导入地图模块

    import { MapView } from 'react-native-amap3d'
    

    4.设置地图状态
    所谓的地图状态包括:中心坐标(coordinate)、缩放级别(zoomLevel)、倾斜度(titl)、旋转角度(rotation)、显示区域(region)、地图模式(mapType)。目前高德地图支持5种地图模式:

    标准(standard)
    卫星(satellite)
    导航(navigation)
    公交(bus)
    夜间(night)

    <MapView
                    style={StyleSheet.absoluteFill}
                    coordinate={{
                        latitude: 39.90980,
                        longitude: 116.37296,
                    }}
                    zoomLevel={18}
                    tilt={45}
                    rotation={45}
                    region={{
                        latitude: 39.90980,
                        longitude: 116.37296,
                        latitudeDelta: 0.1,
                        longitudeDelta: 0.1,}}
                    mapType='navigation'
                    showsIndoorMap
                />
    

    5.定位

     <MapView
                    style={StyleSheet.absoluteFill}
                    zoomLevel={18}
                    tilt={45}
                    mapType='standard'
                    locationInterval={10000} //定位间隔(ms),默认 2000
                    distanceFilter={10}     //定位的最小更新距离
                    locationEnabled={true}  //开启定位
                    showslocationbutton={true}
                    showsCompass={true}
                    showsscale={true}
                    showsTraffic={true}
                    region={{
                        latitude: this.state.mLatitude,
                        longitude: this.state.mLongitude,
                        latitudeDelta: 0.1,
                        longitudeDelta: 0.1,
                    }}
                    //onlocation 启动定位显示  regison  中的显示区域
                    onlocation={({nativeEvent}) =>this.setState({
                        mLatitude: nativeEvent.latitude,
                        mLongitude: nativeEvent.longitude,
                    })}
                    //onLocation={({nativeEvent}) =>{this.toPosition(nativeEvent)}}
                />
    

    相关文章

      网友评论

      • cf160f354c07:这个组件没有mark 清除功能,多图渲染也没有图片显示,楼主有遇到吗

      本文标题:reactnative 高德地图(react-native-am

      本文链接:https://www.haomeiwen.com/subject/mppqxftx.html