高德地图react-native-amap3d的使用

孟宪磊mxl

已于 2024-02-20 14:31:10 修改

阅读量1.1k

点赞数

文章标签： react native android react.js

于 2023-06-26 13:52:44 首次发布

本文链接：https://blog.csdn.net/m0_69210482/article/details/131395518

版权

在这里简单给大家介绍一下react-native-amap3d的环境配置和使用案例更多功能可查看https://github.com/qiuxiang/react-native-amap3d

首先

npm install react-native-amap3d

cd ios && pod install && cd ..

Android环境配置：

路径：android/app/src/main/AndroidManifest.xml添加如下代码：

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

IOS环境配置：

在项目目录下找到AppDelegate.mm

引入以下代码：

在顶部引入

#import <AMapFoundationKit/AMapFoundationKit.h>
注意：一定要在最上面引用

然后

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{

//在此处加入下面的代码

[AMapServices sharedServices].apiKey = @"你的key值";
..............
}

使用示例：

import { View, Text } from 'react-native'
import React, { useEffect } from 'react'
import {
  AMap,
  MapView,
  Polyline,
  Polygon,
  MapType,
  AMapSdk,
  Marker
} from 'react-native-amap3d';
export default function index() {
  useEffect(() => {
    // MapView.destroy();
    AMapSdk.init(
      Platform.select({
        android: '你的key值',
        ios: '你的key值',
      }),
    );
    return () => {

    };
  }, [])
  return (
    <>
      <MapView
        mapType={MapType.Satellite}

        initialCameraPosition={{
          target: {
            latitude: 39.91095,
            longitude: 116.37296

          },
          zoom: 8,
        }}
      >

      </MapView>
    </>
  )
}

感谢浏览！记得点个赞哦