简介
react-native-baidu-map-sxitofork 是一个使用 React Native 开发的百度地图封装库。可以很方便地在 React Native 项目中进行百度地图相关开发。
安装
使用 npm 安装：
npm install react-native-baidu-map-sxitofork --save
配置
iOS
在 Info.plist 中加入以下内容：
<key>NSLocationWhenInUseUsageDescription</key> <string>YOUR_USAGE_DESCRIPTION</string> <key>NSLocationAlwaysUsageDescription</key> <string>YOUR_USAGE_DESCRIPTION</string>
在 AppDelegate.m 中引入百度地图 SDK：
-- -------------------- ---- -------
------- ----------------------------------
- -------------------------------- ------------- ------------------------------------------- ---------------
-
------------- ----------- - --------------- ------ ------
---- --- - ----------- --------------------- ---------------------
-- ------ -
--------------- ----- ----------
-
-----
-Android
在 AndroidManifest.xml 中加入以下内容：
-- -------------------- ---- -------
----------
---------------- --------------------------------------------------------
---------------- --------------------------------------------------------
---- -------- ---
-------------
---
-------- ---------------------------------------------- ---------------------- ------------------------------------
-------- ------------------------------------------- ---------------------------------
--------------
-----------在 build.gradle 中加入以下依赖：
dependencies {
//...
implementation 'com.baidu.lbsapi: LBSYingYongYuan:1.0.23'
}在 settings.gradle 中加入以下内容：
include ':ReactNativeBaiduMapSxiToFor'
project(':ReactNativeBaiduMapSxiToFor').projectDir = new File(
rootProject.projectDir,
'../node_modules/react-native-baidu-map-sxitofork/android/src/main'
)在 MainApplication.java 中注册模块：
-- -------------------- ---- -------
------ -------------------------------------------- -- ------
------ ----- --------------- ------- ----------- ---------- ---------------- -
-----
------- ----- --------------- ---------------- - --- --------------------- -
-----
---------
--------- ------------------ ------------- -
------ ----------------------------
-- ---
--- ------------------------- -- ---
-- ---
--
-
--
-使用
导入模块
import MapView from 'react-native-baidu-map-sxitofork';
组件
MapView
地图容器组件。
属性列表：
style：样式zoomControlsVisible：是否显示缩放控件trafficEnabled：是否显示交通图baiduHeatMapEnabled：是否显示热力图mapType：地图类型（普通地图：1，卫星地图：2，空白地图：3）zoomLevel：缩放级别，范围为 3 到 19center：地图中心点坐标，格式为{latitude: 纬度, longitude: 经度}
-- -------------------- ---- ------- -------- ------------- --- -------------------------- ---------------------- --------------------------- ----------- -------------- ------------------ ---------- ---------- ------------ --
Marker
地图标记点组件。
属性列表：
coordinate：标记点坐标，格式为{latitude: 纬度, longitude: 经度}onPress：点击事件回调函数
-- -------------------- ---- -------
--------
------------- ---
--------------------------
----------------------
---------------------------
-----------
--------------
------------------ ---------- ---------- ------------
-
---------------
---------------------- ---------- ---------- ------------
----------- -- -----------------------
--
----------Polyline
地图折线组件。
属性列表：
coordinates：折线上的坐标数组，格式为[{latitude: 纬度, longitude: 经度}]color：颜色，格式为#RRGGBBwidth：宽度，单位为像素
-- -------------------- ---- -------
--------
------------- ---
--------------------------
----------------------
---------------------------
-----------
--------------
------------------ ---------- ---------- ------------
-
-----------------
--------------
---------- ---------- ---------- ------------
---------- ---------- ---------- ------------
---------- ---------- ---------- -----------
---------- ---------- ---------- ------------
---------- ---------- ---------- ------------
--
------------
---------
--
----------Polygon
地图多边形组件。
属性列表：
coordinates：多边形上的坐标数组，格式为[{latitude: 纬度, longitude: 经度}]fillColor：填充颜色，格式为#RRGGBBstrokeColor：边框颜色，格式为#RRGGBBstrokeWidth：边框宽度，单位为像素
-- -------------------- ---- -------
--------
------------- ---
--------------------------
----------------------
---------------------------
-----------
--------------
------------------ ---------- ---------- ------------
-
----------------
--------------
---------- ---------- ---------- ------------
---------- ---------- ---------- ------------
---------- ---------- ---------- -----------
---------- ---------- ---------- ------------
---------- ---------- ---------- ------------
--
----------------
------------------
---------------
--
----------示例代码
-- -------------------- ---- -------
------ ------- ---- -----------------------------------
------ ------ - --------- - ---- --------
------ -
-----------
-----
-----------------
-----
- ---- ---------------
------ ------- ----- --- ------- --------- -
------------------ -
-------------
---------- - -
---------- --------
--------- -------
--------- -
---------- ---------- ---------- ------------
---------- ---------- ---------- ------------
---------- ---------- ---------- -----------
---------- ---------- ---------- ------------
---------- ---------- ---------- ------------
--
--
-
-------- -
------ -
----- ------------- ----
--------
------------------
--------------------------
----------------------
---------------------------
-----------
--------------
------------------ -------------------- ---------- ----------------------
-
---------------
---------
---------------------- -------------------- ---------- ----------------------
----------- -- ---------------------
------------ -- -
------------------------ ---------------
---------------
---------- ------------------------
--------- -----------------------
---
--
-
----- ----------------------------
----- -------------- ----------------------
-------
-----------------
-----------------
---------------------------------
------------
---------
--
----------------
---------------------------------
----------------
------------------
---------------
--
----------
----- -------------------------------
----------------- ----------------------
----- -----------------------------------
-------------------
----------------- ----------------------
----- -----------------------------------
-------------------
----------------- ----------------------
----- -----------------------------------
-------------------
-------
-------
--
-
-
----- ------ - -------------------
---- -
----- --
--
------------- -
---------------- -------
------------- --
-------- --
--
---------------- -
-------------- ------
--------------- ---------------
--
------- -
---------------- ----------
------------- ---
---------------- ---
------------------ ---
--
----------- -
------ -------
--------- ---
----------- -------
--
---总结
react-native-baidu-map-sxitofork 是一款简单易用的百度地图封装库，可以帮助开发者快速在 React Native 项目中实现百度地图相关功能。在使用时，需要注意正确配置 iOS 和 Android 平台的相关权限和依赖，同时细心阅读文档，详细了解组件的属性和用法。希望本文对大家学习和使用 react-native-baidu-map-sxitofork 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668881e8991b448e2c3d