传单设置默认值位置

Question

目前与传单地图一起出现的总是错误信息：无效的 LatLng 对象：（未定义，未定义）

这是因为在检索地图时我的变量尚不可用。

我的代码：

import React from "react";
import { TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
import StyledMapContainer from "./styled.js";
import { Marker, Popup } from "react-leaflet";
import MarkerIcon from "../mapmarker/index.jsx";

const Map = ({ data }) => {
    console.log(data?.latitude);
    const position = [data?.latitude, data?.longitude];

    return (
        <StyledMapContainer
            watch
            enableHighAccuracy
            zoomControl
            center={position}
            zoom={[13]}
            scrollWheelZoom={true}
        >
            <TileLayer
                url="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}@2x?access_token="
                zoomControl={true}
            />
            <Marker position={position} icon={MarkerIcon}>
                <Popup>The Ship is here!</Popup>
            </Marker>
        </StyledMapContainer>
    );
};

export default Map;

现在我想构建一些东西，以便首先采用默认值，然后，一旦纬度和经度可用，它们就会被交换

我试过：

    if (position === "undefined") {
        const positon = [37.84151, -6.041185];
    }

不幸的是，这不起作用。你们有什么想法吗？感谢您的帮助！

Answer 1

position 可能永远不会等于 "undefined" 因为这是一个字符串。你想要的是，

if (position === undefined) {
        const positon = [39.86101, -0.069185];
   }

但这仍然很棘手，因为位置可以为空。

所以我会这样做。

   if (!position) {
        const positon = [39.86101, -0.069185];
      }

详细了解 Javascript here 的虚假值。

但在您的情况下，完整代码可能如下所示。

import React from "react";
import { TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
import StyledMapContainer from "./styled.js";
import { Marker, Popup } from "react-leaflet";
import MarkerIcon from "../mapmarker/index.jsx";

const Map = ({ data }) => {
  let position = [39.86101, -0.069185];
  if (data?.latitude && data?.longitude) {
      const lat = parseFloat(data?.latitude);
      const lng = parseFloat(data?.longitude);
      if (Number.isFinite(lat) && Number.isFinite(lng)) {
        position = [lat, lng];
      }
    }
    

    return (
        <StyledMapContainer
            watch
            enableHighAccuracy
            zoomControl
            center={position}
            zoom={[13]}
            scrollWheelZoom={true}
        >
            <TileLayer
                url="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}@2x?access_token="
                zoomControl={true}
            />
            <Marker position={position} icon={MarkerIcon}>
                <Popup>The Ship is here!</Popup>
            </Marker>
        </StyledMapContainer>
    );
};

export default Map;

传单设置默认值位置

Leaflet set default value position

javascript

fetch

leaflet

reactjs

next.js