“fitToSuppliedMarkers”在反应本机地图中不起作用 - android

Question

`我没有收到任何错误消息，但当我设置目的地标记时，地图应该会自动缩小。然而，地图保持不变。我必须查看从出发地到目的地的路线，我必须手动完成。

我尝试了堆栈溢出和网络上已有的所有可能的解决方案，将我的反应本机地图版本减少到0.31.1，但我没有成功解决问题。你的文字

这是我的 Map.js，我在其中实现了 fitToSuppliedMarkers

`import React, { useEffect, useRef, useState } from 'react';
import MapView, { Marker } from 'react-native-maps';
import { useSelector } from 'react-redux';
import { SelectDestination, SelectOrigin } from '../Slices/navSlice';
import MapViewDirections from 'react-native-maps-directions';
import { GOOGLE_MAPS_APIKEY } from '@env';
import Tw from 'twrnc';

const Map = () => {
  const mapRef = useRef(null);
  const origin = useSelector(SelectOrigin);
  const destination = useSelector(SelectDestination);
  
  useEffect(() => {
    if (!origin || !destination || !mapRef.current) return;

    // console.log(mapRef);
    // Zoom and fit to current markers
    mapRef.current.fitToSuppliedMarkers(["Origin", "Destination"], {
      edgePadding: { top: 50, right: 50, bottom: 50, left: 50 },
      animated: true,
    });
  }, [origin, destination]);

  return (
    <MapView
      ref={mapRef}
      style={Tw`flex-1`}
      initialRegion={{
        latitude: origin?.location?.lat || 0,
        longitude: origin?.location?.lng || 0,
        latitudeDelta: 0.05,
        longitudeDelta: 0.05,
      }}
    >
      {origin && destination && (
        <MapViewDirections
          origin={origin.description}
          destination={destination.description}
          apikey={GOOGLE_MAPS_APIKEY}
          strokeWidth={3}
          strokeColor='black'
        />
      )}

      {origin?.location && (
        <Marker
          coordinate={{
            latitude: origin.location.lat,
            longitude: origin.location.lng,
          }}
          title="Origin"
          description={origin.description}
        />
      )}

      {destination?.location && (
        <Marker
          coordinate={{
            latitude: destination.location.lat,
            longitude: destination.location.lng,
          }}
          title="Destination"
          description={destination.description}
        />
      )}
    </MapView>
  );
};

export default Map;`

This is my package.json
{
  "name": "route-rover-project",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/webpack-config": "^18.0.1",
    "@react-navigation/native-stack": "^6.9.13",
    "@react-navigation/stack": "^6.3.17",
    "@reduxjs/toolkit": "^1.9.5",
    "@sanity/client": "^6.4.4",
    "@sanity/image-url": "^1.0.2",
    "expo": "~48.0.18",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.8",
    "react-native-animatable": "^1.3.3",
    "react-native-dotenv": "^3.4.9",
    "react-native-google-places-autocomplete": "^2.5.1",
    "react-native-maps": "^1.3.2",
    "react-native-maps-directions": "^1.9.0",
    "react-native-progress": "^5.0.0",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-svg": "13.4.0",
    "react-native-web": "~0.18.10",
    "react-redux": "^8.1.2",
    "twrnc": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

注意：起点和目的地值已完美设置，即使地图参考正常工作，但“fitToSuppliedMarkers”仍然无法正常工作。

Answer 1

我正在研究android操作系统。为了解决这个问题，我设置了 setTimeout，以便 fitToSuppliedMarkers 等待数据加载到目标并创建新标记。这是因为，如果地图组件在目的地更改时获取数据或重绘标记，则在调用 fitToSuppliedMarkers 时它可能尚未完成这些操作。我不确定 setTimeout 是否是一个好的解决方案，但至少它对我有用。

const mapRef = useRef();

  useEffect(() => {
    if (!origin || !destination || !mapRef.current) return;

    setTimeout(() => {
      mapRef.current.fitToSuppliedMarkers(["origin", "destination"], {
        edgePadding: {
          top: 150,
          right: 50,
          bottom: 50,
          left: 50,
        },
      });
    }, 1500);
  }, [origin, destination, mapRef]);

此外，对于 fitToSuppliedMarkers 函数，仅使用 Marker 组件中的“identifier”属性非常重要。因此，您需要在 Marker 组件中指定“identifier”并将其设置为 fitToSuppliedMarkers 数组，如下所示：

{origin?.location && (
        <Marker
          coordinate={{
            latitude: origin.location.lat,
            longitude: origin.location.lng,
          }}
          title="Origin"
          description={origin.description}
          identifier={"origin"}  // HERE identifier
        />
      )}

      {destination?.location && (
        <Marker
          coordinate={{
            latitude: destination.location.lat,
            longitude: destination.location.lng,
          }}
          title="Destination"
          description={destination.description}
          identifier={"destination"}  // HERE identifier
        />
      )}

然后您可以在 fitToSuppliedMarkers 函数中使用标识符。

mapRef.current.fitToSuppliedMarkers(["origin", "destination"], { //options })

我的最终工作代码如下所示

import React, { useEffect, useRef } from "react";
import MapView, { Marker } from "react-native-maps";
import { useSelector } from "react-redux";
import { selectDestination, selectOrigin } from "../slices/navSlice";
import MapViewDirections from "react-native-maps-directions";
import { GOOGLE_MAPS_APIKEY } from "@env";

const Map = () => {
  const origin = useSelector(selectOrigin);
  const destination = useSelector(selectDestination);
  const mapRef = useRef();

  useEffect(() => {
    if (!origin || !destination || !mapRef.current) return;

    setTimeout(() => {
      mapRef.current.fitToSuppliedMarkers(["origin", "destination"], {
        edgePadding: {
          top: 150,
          right: 50,
          bottom: 50,
          left: 50,
        },
      });
    }, 1500);
  }, [origin, destination, mapRef]);

  return (
    <MapView
      ref={mapRef}
      className="flex-1"
      mapType="mutedStandard"
      initialRegion={{
        latitude: origin.location.lat,
        longitude: origin.location.lng,
        latitudeDelta: 0.005,
        longitudeDelta: 0.005,
      }}
    >
      {origin && destination && (
        <MapViewDirections
          origin={origin.description}
          destination={destination.description}
          apikey={GOOGLE_MAPS_APIKEY}
          strokeWidth={3}
          strokeColor="black"
        />
      )}

      {origin?.location && (
        <Marker
          coordinate={{
            latitude: origin.location.lat,
            longitude: origin.location.lng,
          }}
          title="Origin"
          description={origin.description}
          identifier={"origin"}
        />
      )}

      {destination?.location && (
        <Marker
          coordinate={{
            latitude: destination.location.lat,
            longitude: destination.location.lng,
          }}
          title="Destination"
          description={destination.description}
          identifier={"destination"}
        />
      )}
    </MapView>
  );
};

export default Map;