这里地图-MapView.getCamera（）。lookat（）方法确实更新mapView

Question

我为此创建React Antive本机UI组件。我面临的问题是加载地图，但确实使用MapView.getCamera（）。lookat（）方法更新了加载的MAPVIEW。我遵循的方法是将mapView加载到片段中，我用来渲染地图。

这里地图SDK-探索版

heremapfragment.java

public class HereMapFragment extends Fragment {

  private MapViewProperties mapViewProperties;

  public HereMapFragment(ThemedReactContext reactContext) {
    this.context = reactContext;
    mapViewProperties = new MapViewProperties();
  }

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
    super.onCreateView(inflater, parent, savedInstanceState);
    ConstraintLayout frameLayout = (ConstraintLayout) inflater.inflate(R.layout.map_fragment, null);
    return frameLayout;
  }

  @Override
  public void onViewCreated(View view, Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    this.mapView = view.findViewById(R.id.map_view);
    this.mapView.onCreate(savedInstanceState);
    loadMapScene();

  }

  private void loadMapScene() {
    this.mapView.getMapScene().loadScene(MapScheme.NORMAL_DAY, new MapScene.LoadSceneCallback() {
      @Override
      public void onLoadScene(@Nullable MapError mapError) {
        Log.d(TAG, "on loadscene called.");
        if (mapError == null) {
          mapView.getMapScene().setLayerVisibility(MapScene.Layers.LANDMARKS, VisibilityState.VISIBLE);
          Log.e(TAG, Double.toString(mapViewProperties.getCurrentCoordinates().latitude)); //This prints correct coordinates
          Log.e(TAG, Double.toString(mapViewProperties.getCurrentCoordinates().longitude));
          mapView.getCamera().lookAt(mapViewProperties.getCurrentCoordinates());
          // searchExample = new SearchExample(context, mapView);
        } else {
          Log.d(TAG, "onLoadScene failed: " + mapError.toString());
        }
      }
    });
  }

  public void setCurrentCoordinates(GeoCoordinates currentCoordinates) {
    mapViewProperties.setCurrentCoordinates(currentCoordinates);
  }

  @Override
  public void onPause() {
    super.onPause();
    mapView.onPause();
  }

  @Override
  public void onResume() {
    super.onResume();
    mapView.onResume();
  }

  @Override
  public void onDestroy() {
    super.onDestroy();
    mapView.onDestroy();
  }

}

heremapsviewManager.java

public class HereMapsViewManager extends ViewGroupManager<ConstraintLayout> {

  private Fragment fragment;

  @Override
  public ConstraintLayout createViewInstance(ThemedReactContext reactContext) {
    final ConstraintLayout view = new ConstraintLayout(context);
    fragment = new HereMapFragment(reactContext);
    reactContext.getCurrentActivity().getFragmentManager()
        .beginTransaction()
        .add(fragment, "My_TAG")
        .commit();
    reactContext.getCurrentActivity().getFragmentManager().executePendingTransactions();
    addView(view, fragment.getView(), 0);
    return view;

  }

  @ReactProp(name = "defaultMarker")
  public void setDefaultMarker(ConstraintLayout view, ReadableMap readableMap) {
    MapView mapView = view.findViewById(R.id.map_view);
   
    Log.e(TAG, Double.toString(readableMap.getDouble("latitude")));
    ((HereMapFragment) fragment).setCurrentCoordinates(
        new GeoCoordinates(readableMap.getDouble("latitude"), readableMap.getDouble("longitude")));
  }
}

map_fragment.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent">
    <com.here.sdk.mapview.MapView android:id="@+id/map_view" android:layout_width="match_parent" android:layout_height="match_parent">
    </com.here.sdk.mapview.MapView>
    <LinearLayout app:layout_constraintTop_toTopOf="parent" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal">
        <Button android:id="@+id/search_id" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Search" />
        <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Geocoding" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

logs

07-05 20:49:18.500  9606  9937 I harp-sdk: [INFO ] harp-sdk - Data source added
07-05 20:49:18.588  9606  9606 I harp-sdk: [INFO ] harp-sdk - Render loop thread resumed
07-05 20:49:18.588  9606  9606 W harp-sdk: [WARN ] harp-sdk - View config is empty. No map content will be displayed until valid config is provided.
07-05 20:49:18.589  9606  9606 I harp-sdk: [INFO ] harp-sdk - Adding renderable
07-05 20:49:18.589  9606  9606 I harp-sdk: [INFO ] harp-sdk - Adding data source
07-05 20:49:18.590  9606  9606 I chatty  : uid=10163(com.amazon.sft.rangoli.seller.app) identical 6 lines
07-05 20:49:18.590  9606  9606 I harp-sdk: [INFO ] harp-sdk - Adding data source
07-05 20:49:18.594  9606  9937 I harp-sdk: [INFO ] harp-sdk - Skip applying configuration with empty filename.
07-05 20:49:18.594  9606  9937 W harp-sdk: [WARN ] harp-sdk - Invalid render target at initialization time.
07-05 20:49:18.594  9606  9937 W harp-sdk: [WARN ] harp-sdk - Invalid map configuration at initialization time.
07-05 20:49:18.594  9606  9937 I harp-sdk: [INFO ] harp-sdk - Renderable added
07-05 20:49:18.595  9606  9937 I harp-sdk: [INFO ] harp-sdk - Data source added
07-05 20:49:18.595  9606  9937 I harp-sdk: [INFO ] harp-sdk - Data source added

我试图求解负载为28.7041°N，77.1025°E，但默认位置正在加载。如果有人可以帮助解决这个问题，这将非常有帮助。

Answer 1

请参阅以下步骤，该步骤讲述了如何构建显示地图并响应用户操作的React组件，无论是与地图或其他组件的直接交互。

设置
对于新的React应用程序的快速设置，我们将使用创建react react app app 环境。它提供了一种快速开始构建新的单页应用程序的方法。如下（需要节点＆gt; = 8.10和npm＆gt; = 5.6）

NPX create-react-app-app jsapi-react＆amp;＆amp;＆amp; CD JSAPI反应

以上呼叫产生启动应用程序所需的脚手架。 JSAPI反应目录中的目录结构如下。 React组件位于SRC目录中：

my-app
├├前
├ - node_modules
├─..pand.json
├─-.gitignore
├ - 公共
││├─......................................
└ - src
├─CS.CSS
├ - app.js
├─..p.test.js
├─CSS
├ - index.js
├ - 徽标svg
└─— serviceworker.js
└ - setuptests.js

之后，可以像往常一样安装@here名称空间的软件包：

npm install @there/maps-api-for-javaScript-在此步骤中进行 -

在此步骤中设置，环境设置已完成，构建所需的所有软件包安装了示例应用程序，可以通过执行：

NPM启动

上面的命令启动开发服务器，以“热重新加载”功能启动开发服务器，并在浏览器。

添加一个静态地图组件，

可以通过创建包含H.MAP实例并将其渲染到组件容器的组件来添加静态映射。为此，为新的React类组件在SRC目录中创建一个文件映射。该组件在具有宽度和高度为300像素的容器中显示一个地图：

从“ React”导入React；
从“@there/maps-api-for-javascript”导入h；

导出默认类映射扩展react.component {
构造函数（props）{
超级（道具）；
//对容器的引用
this.ref = react.CreateRef（）;
//参考地图
this.map = null;
}

componentDidmount（）{
如果（！this.map）{
//像往常一样实例化平台，默认图层和地图
const platform = new H.Service.platform（{
apikey：'{your_api_key}'
}）;
const layers = platform.createdeDefaultLayers（）;
const map =新的h.map（
this.ref.current，
layers.vector.normal.map，
{
pixelratio：window.devicepixelratio，
中心：{LAT：0，LNG：0}，
Zoom：2，
}，，
）；
this.map = map;
}
}

使成为（） {
返回 （
＆lt; div
style = {{width：'300px'，高度：'300px'}}
ref = {this.ref}
/＆gt;
）
}
}

以上组件现在可以在应用程序组件中使用，用以下代码替换th src/app.js的内容：

从'./ map''导入映射;

功能应用程序（）{
返回 （

）；
}

导出默认应用程序;

这将在Zoom 2级和0纬度和经度上渲染静态图：

您可以在 react文档链接