react-native 接百度地图API（显示周边poi）

最新推荐文章于 2024-03-29 20:45:00 发布

原创

最新推荐文章于 2024-03-29 20:45:00 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react-native #百度地图

这篇博客主要记录了如何在react-native应用中集成百度地图API，实现显示周边兴趣点（POI）以及搜索POI的功能。在Android端，配置过程相对简单，遵循官方文档即可。而在iOS端，需要特别注意解决导入framework时可能出现的报错，通过调整Build Settings的路径设置。在react-native端，示例代码展示了如何调用原生模块进行操作。附有参考图展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react-native 接百度地图API （显示周边poi）

目的：显示周边poi及搜索poi功能（给自己的笔记，省去了很多基础步骤，有问题的可以先去了解RN跟android以及Ios原生的通信）

Android

环境配置按照官网提供的文档来就行比较简单

BaiDuLocationModule.java

package com.demo.baidulocation; // 自己的包名

import java.util.List;
import org.json.JSONObject;
import org.json.JSONArray;

import com.baidu.location.BDLocation;
import com.baidu.location.BDLocationListener;
import com.baidu.location.LocationClient;
import com.baidu.location.LocationClientOption;
import com.baidu.location.Poi;

import com.baidu.mapapi.model.LatLng;
import com.baidu.mapapi.search.core.PoiInfo;
import com.baidu.mapapi.search.poi.PoiSearch;
import com.baidu.mapapi.search.poi.PoiResult;
import com.baidu.mapapi.search.poi.PoiDetailResult;
import com.baidu.mapapi.search.core.SearchResult;
import com.baidu.mapapi.search.poi.PoiDetailSearchResult;
import com.baidu.mapapi.search.poi.PoiIndoorResult;
import com.baidu.mapapi.search.poi.PoiNearbySearchOption;
import com.baidu.mapapi.search.poi.OnGetPoiSearchResultListener;
import com.baidu.mapapi.search.poi.PoiSortType;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.Callback;

public class BaiDuLocationModule extends ReactContextBaseJavaModule{
   
   
  private ReactApplicationContext mContext;
  public LocationClient mLocationClient = null;
  private Callback locationCallback;
  private Callback searchCallback;
  PoiSearch poiSearch;
  double lat = 0;
  double lng = 0;
  BaiDuLocationModule(ReactApplicationContext reactContext) {
   
   
      super(reactContext);
      mContext = reactContext;
  }

  @Override
  public String getName() {
   
   
      return "BaiDuLocation";
  }

  // 获取地理位置
  @ReactMethod
  public void startLocation( Callback locationCallback) {
   
   
    this.locationCallback = locationCallback;
    mLocationClient = new LocationClient(getReactApplicationContext());     //声明LocationClient类
    mLocationClient.registerLocationListener(myListener);    //注册监听函数
    LocationClientOption option = new LocationClientOption();
    option.setLocationMode(LocationClientOption.LocationMode.Hight_Accuracy
    );//可选，默认高精度，设置定位模式，高精度，低功耗，仅设备
    option.setCoorType("bd09ll");//可选，默认gcj02，设置返回的定位结果坐标系
    int span = 0;
    option.setScanSpan(span);//可选，默认0，即仅定位一次，设置发起定位请求的间隔需要大于等于1000ms才是有效的
    option.setIsNeedAddress(true);//可选，设置是否需要地址信息，默认不需要
    option.setOpenGps(true);//可选，默认false,设置是否使用gps
    option.setLocationNotify(true);//可选，默认false，设置是否当gps有效时按照1S1次频率输出GPS结果
    option.setIsNeedLocationDescribe(true);//可选，默认false，设置是否需要位置语义化结果，可以在BDLocation.getLocationDescribe里得到，结果类似于“在北京天安门附近”
    option.setIsNeedLocationPoiList(true);//可选，默认false，设置是否需要POI结果，可以在BDLocation.getPoiList里得到
    option.setIgnoreKillProcess(false);//可选，默认true，定位SDK内部是一个SERVICE，并放到了独立进程，设置是否在stop的时候杀死这个进程，默认不杀死
    option.SetIgnoreCacheException(false);//可选，默认false，设置是否收集CRASH信息，默认收集
    option.setEnableSimulateGps(false);//可选，默认false，设置是否需要过滤gps仿真结果，默认需要
    mLocationClient.setLocOption(option);
    mLocationClient.start();
  }

    /**
    * 定位回掉
    */
  public BDLocationListener myListener = new BDLocationListener() {
   
   
    @Override
    public void onReceiveLocation(final BDLocation bdLocation) {
   
   
      JSONObject data = new JSONObject();
      mLocationClient.unRegisterLocationListener(this);
      mLocationClient.stop();
      lat = bdLocation.getLatitude();
      lng = bdLocation.getLongitude();
      try{
   
   
        data.put("code", bdLocation.getLocType());
        data.put("latitude", bdLocation.getLatitude());
        data.put("longitude", bdLocation.getLongitude());
        data.put("addr", bdLocation.getAddrStr()); // 详细地址
        data.put("province", bdLocation.getProvince()); // 省
        data.put("city"