错误：'Map‘没有从'react-leaflet’导出(导入为'LeafletMap')
错误：'Map'没有从'react-leaflet'导出(导入为'LeafletMap')
这个错误是由于在使用'react-leaflet'库时，尝试导入名为'Map'的组件，但实际上该库并没有导出名为'Map'的组件。正确的导入方式应该是将组件导入为'LeafletMap'。
'react-leaflet'是一个用于在React应用中集成Leaflet地图库的工具。Leaflet是一个开源的JavaScript库，用于创建交互式地图。通过'react-leaflet'，我们可以在React应用中轻松地使用Leaflet的功能。
要解决这个错误，我们需要将导入语句中的组件名更改为'LeafletMap'。例如：
import { LeafletMap } from 'react-leaflet';LeafletMap组件是'react-leaflet'库中的一个核心组件，它允许我们在React应用中渲染Leaflet地图。可以通过传递不同的属性来配置地图的样式、位置、缩放级别等。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云地图服务：提供了丰富的地图数据和功能，可用于构建各种地图应用。详情请参考：腾讯云地图服务
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，用于部署和运行应用程序。详情请参考：腾讯云云服务器
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，适用于存储和管理各种类型的数据。详情请参考：腾讯云对象存储
- 腾讯云人工智能（AI）：提供丰富的人工智能服务和工具，包括图像识别、语音识别、自然语言处理等。详情请参考：腾讯云人工智能
- 腾讯云物联网（IoT）：提供全面的物联网解决方案，帮助连接和管理物联网设备。详情请参考：腾讯云物联网
- 腾讯云区块链（BCS）：提供安全、高效的区块链服务，用于构建和管理区块链网络。详情请参考：腾讯云区块链
- 腾讯云音视频处理（VOD）：提供强大的音视频处理和分发服务，适用于各种音视频应用场景。详情请参考：腾讯云音视频处理
- 腾讯云云原生应用引擎（TKE）：提供全托管的容器化应用服务，简化应用的构建、部署和管理。详情请参考：腾讯云云原生应用引擎
以上是腾讯云提供的一些与云计算相关的产品，可以根据具体需求选择适合的产品来支持开发和部署云计算应用。
相关·内容
我正在开发一个贪心的应用程序，它显示了所有三次浪潮中的贪婪死亡率，特别是对我的国家印度，但问题是当我试图使用传单包时，它显示了一个错误。
import React from "react";
import { Map as LeafletMap, TileLayer } from "react-leaflet";
import "./Map.css";
import { showDataOnMap } from "./util";
function Map({ countries, casesType, center, zo
浏览 16提问于2022-02-12得票数 1
回答已采纳
3回答
加载反应传单时出错
、、、
我正在尝试加载传单地图，但它给了我一个错误：
Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap').
我试图再次安装react传单，并尝试在我的leaflet/dist/leaflet.css文件中导入App.js，但它仍然显示了错误。这是代码
Map.js
import { Map as LeafletMap, TileLayer } from "react-leaflet";
import &#
浏览 5提问于2020-12-27得票数 1
回答已采纳
我想为我的项目渲染地图。为此，我使用代码npm i react-leaflet安装了npm i react-leaflet，在终端中也安装了npm i leaflet，并输入了一些反应传单的代码。守则如下：
import React from "react";
import { Map as LeafletMap, TileLayer } from "react-leaflet";
import "./map.css";
// import { showDataOnMap } from "./util";
function Ma
浏览 1提问于2020-11-26得票数 0
当我试图在一个用'react-leaflet'库制作的react应用程序中创建一个简单的地图组件时，我遇到了'create-react-app'库的麻烦，没有类型记录，也没有流。
下一个代码是一个简单的地图组件，它使用'react-leaflet'和普通的html和node_modules，我不能在'create-react-app'项目中复制它。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
浏览 0提问于2018-07-05得票数 2
下面是我的代码： import { Map as LeafletMap, TileLayer } from 'react-leaflet';
function Map() {
return (
<div className="map">
<LeafletMap>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attributio
浏览 42提问于2021-10-10得票数 0
如果有人能帮我的话我会很高兴的。我已经在我的react项目上安装了react-leaflet，并且地图组件加载成功，我需要获取最新的latlng，并在单击地图时在弹出窗口中显示它，但我不知道如何:(
请..。请..。帮帮我..。
这是我的代码
import React from 'react'
import { Map as LeafletMap, TileLayer, Marker, Popup } from 'react-leaflet';
class Mapp extends React.Component {
componentDidMount
浏览 0提问于2019-02-03得票数 9
回答已采纳
我想不出如何在传单地图上调用fitBounds()。
如果我只使用vanilla leaflet，这个解决方案将完美地工作：
不幸的是，我使用的是react-leaflet。
如果我只是单独使用leaflet，这就是解决方案。
var leafletMap = new L.featureGroup([marker1, marker2, marker3]);
map.fitBounds(leafletMap.getBounds());
我认为这段代码(我的代码) this.mapRef.current.leafletElement等同于var leafletMap = new L.feature
浏览 4提问于2018-06-15得票数 14
我一直在尝试将leaflet集成到我的react应用程序中。找不到如何从标记中读取属性。我设法在普通的JavaScript中做到了这一点，但不能将其应用于React JS项目。如何查找可拖动标记经度和经度属性？ import React, { useState, useEffect } from "react";
import { Map as LeafletMap, TileLayer, Marker, Popup } from "react-leaflet";
import RangeSlider from "react-bootstrap-ran
浏览 24提问于2020-10-15得票数 0
回答已采纳
我试图简单地导入react-leaflet而不在我的项目中渲染任何地图，但它给了我这个错误。
TypeError: Object(...) is not a function
我可以肯定地知道它来自import语句。它甚至在第2行的错误中指向它，这是我的代码。
import React from 'react'
import { Map } from 'react-leaflet'
export default class MyMap extends React.Component {
constructor() {
super()
thi
浏览 13提问于2018-08-01得票数 0
我正在React项目中使用Leaflet，我想导入一个插件来扩展Leaflet Polyline，该插件是Leaflet.Polyline.SnakeAnim 我没有使用react-leaflet，而是直接使用Javascript库，以下是我的代码： import React from 'react';
import L from 'leaflet';
import 'leaflet.polyline.snakeanim';
class LeafletMap extends React.Component {
componentDidM
浏览 54提问于2020-06-12得票数 0
回答已采纳
我正在做这个项目，我会发现这个错误。我还没有找到适合我的代码的解决方案。误差=
元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但未定义。
它也要求我
检查应用程序的呈现方法。
这是我的密码。
import { StatusBar } from 'expo-status-bar';
import React, { Component, createRef } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import L from
浏览 3提问于2021-01-20得票数 0
回答已采纳
1回答
我有一个数组，有三个索引- ID，LAT，LNG。我想从我的数组中得到LAT & LNG，并在我的标记上设置值。对于第一个索引，我想显示一个PopUp。
我用传单图表来做反应。
守则：
import './App.css';
import React from 'react'
import { Map as LeafletMap, TileLayer, Marker, Popup } from 'react-leaflet';
class Map extends React.Component {
constructor() {
浏览 3提问于2019-11-22得票数 1
回答已采纳
我正试图在画布上添加地图，并在那里放置带有react传单库v3.X的瓷砖。目前，tiles正在以<img>的形式显示。在最新版本的react传单中，没有Map对象，只有MapContainer对象。所以我不能将属性preferCanvas=true添加到MapContainer中。值得注意的是，在反应传单的旧版本中，有一个带有preferCanvas选项的Map，但是后来它被删除了。我认为将地图添加到画布中的另一种方法已经存在。拜托救救我。
import React, { useState, useEffect, useRef } from "react";
imp
浏览 6提问于2021-04-18得票数 0
回答已采纳
当使用react-leaflet节点模块时，我得到了一个未定义窗口的错误，因为它依赖于窗口，当然，SSR不支持窗口。我找到了next/dynamic，但是，我找到的所有示例都显示了如何导入组件而不是节点模块。可以包含节点模块吗?如果可以，如何包含？作为一个示例，这是我要导入的内容，它会给窗口带来未定义的错误import { Map, TileLayer, Marker } from 'react-leaflet';
浏览 0提问于2018-10-23得票数 10
回答已采纳
我正在尝试使用create -react- React-Leaflet map创建一个应用程序设置，但是我无法导入我的Simple-Map组件，该组件是使用Named Exports导出的。这是React-Leaflet Examples页面上的第一个示例。 错误是： ./src/Simple.js
Module not found: Can't resolve './components' in '/ice_map/src' 示例中的import statement已更改为import {Map, TileLayer, Marker, Popup }
浏览 164提问于2020-08-12得票数 2
回答已采纳
3回答
我正在尝试使用leaflet-geosearch在我的传单地图中添加一个搜索栏(react-leaflet)
import { Map, TileLayer, MapControl } from 'react-leaflet'
import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch'
class Search extends MapControl {
createLeafletElement() {
return GeoSearchControl({
浏览 0提问于2018-07-12得票数 0
react-leaflet-context-menu是leaflet.contextmenu的react版本。但是，它在react中使用了原始的leaflet地图来实现插件，而不是使用react-leaflet。
我在我的应用中采用了react-leaflet，使用的是组件。我通过互联网，但没有多少例子来展示如何正确地扩展地图。
以下是我的应用程序中地图的代码：
<LeafletMap
ref={m => {this.leafletMap = m;}}
center={this.state.center}
zoom={this.sta
浏览 38提问于2019-11-12得票数 5
我正在构建一个esri项目，我正在跟踪这个演示。我遇到了一个错误，我找不到答案。在演示中，定义了leafletElement，但我的代码中却没有定义它。以下是错误：
无法读取未定义的属性“leafletElement”
以下是代码：
import { StatusBar } from 'expo-status-bar';
import React, { Component, createRef } from 'react';
import { StyleSheet, Text, View } from 'react-native';
im
浏览 2提问于2021-01-20得票数 1
1回答
我正在尝试在新的NextJS13思想下运行一张传单地图，并使用明确声明的客户端函数，它应该可以为我节省一些麻烦。但我不能让它开始工作。我的map组件如下所示：
"use client"
import React from 'react'
import { MapContainer, TileLayer } from 'react-leaflet'
const LeafletMap = () => {
return (
<MapContainer center={[51.505, -0.09]} zoom={13} scr
浏览 21提问于2022-11-24得票数 1
1回答
我正在尝试用react-leaflet构建我自己的缩放按钮
我有以下代码：
import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { Map, TileLayer } from 'react-leaflet';
import Control from 'react-leaflet-control';
import FloatingActionButton from 'mate
浏览 1提问于2016-07-24得票数 1
回答已采纳
1回答
刷新react中的叶图
、、、
我想在缩放后刷新单张地图的圆圈： import React from "react";
import {
Map as LeafletMap,
TileLayer,
Marker,
Circle,
Tooltip,
Popup
} from "react-leaflet";
import MarkerClusterGroup from "react-leaflet-markercluster";
import data from "./data.json";
const TILE_LAYER_AT
浏览 14提问于2020-03-22得票数 0
回答已采纳
2回答
我试图根据可拖放标记的位置更改react-leaflet地图上几个标记的位置。
这应该是在拖动可拖标记时，在state上更改它的速度太慢了，所以我选择用useRef来完成它，成为一个引用数组。
问题是r.leafletElement.setLatLng([lat, lng])行压缩，因为leafletElement是undefined。
(在其他尝试中，我只使用了一个标记，而不是数组，而且useRef工作正常。)
非常感谢您的帮助，谢谢。
const { Map: LeafletMap, TileLayer, Marker, Popup, CircleMarker } = ReactLeaf
浏览 3提问于2020-09-21得票数 1
回答已采纳
我无法在next.js中加载react传单标记。 在这里，我调用了我的map组件。 const MapSearch = dynamic(import('../../components/Map'), {
ssr: false,
loading: () => (
<div style={{textAlign: 'center', paddingTop: 20}}>
Chargement…
</div>
)
})
const Map = () => (
<MapSearch
浏览 11提问于2020-08-30得票数 0
版本: leaftlet - 1.3.4 react-leaflet 2.0.1 宣传单-绘图- 1.0.4 react-leaflet-draw -0.19.8 代码： import { Map, TileLayer, Marker, Popup } from "react-leaflet";
import { EditControl } from "react-leaflet-draw";
import "./styles.css";
class App extends Component {
state = {
cente
浏览 21提问于2021-08-11得票数 0
我尝试将示例用法添加到我的网站开始，这就是它的displayed方式。有没有人看过这个问题？解决方案？ 代码看起来像这样： import React from 'react'
import { Map as LeafletMap, Marker, Popup, TileLayer } from 'react-leaflet'
export default class TestMap extends React.Component {
public render = () => {
const position: [number, nu
浏览 19提问于2020-10-11得票数 0
1回答
我想为我的项目渲染地图。因此，我安装了反应传单，使用代码npm，我反应-传单，也做了npm传单在终端，并输入了一些代码的反应传单。下面给出了代码:这是我的Map.JS文件：
import React from "react";
import { Map as LeafletMap, TileLayer } from "react-leaflet";
import "./map.css";
// import { showDataOnMap } from "./util";
func
浏览 2提问于2021-02-08得票数 0
回答已采纳
我正在尝试使用react-leaflet库做一个简单的Web应用程序。
我有以下代码：
import React from 'react';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
class LeafletMap extends React.Component {
constructor() {
super();
this.state = {
lat: 51.505,
lng: -0.09,
zoom: 13,
浏览 0提问于2016-07-21得票数 3
回答已采纳
3回答
使react传单可以脱机使用
、、、、
我一直在使用库，到目前为止，它运行得很好。
现在，我希望网站能够预加载尽可能多的瓷砖，以便web应用程序(也是PWA)可以使用w/o互联网。
我找到了一些现有的解决方案(尽管不是专门用于反应的)。
到目前为止，我已经尝试过这样做--使用离线传单
import React from 'react';
import 'leaflet-offline';
import {
Map as LeafletMap,
TileLayer,
CircleMarker,
Marker,
Popup,
} from 'react-l
浏览 1提问于2018-10-15得票数 6
回答已采纳
1回答
我正在尝试使用传单插件多谱线的反应16.4.1 (所以没有钩子)。然而，关于如何在react中使用这个插件，我所能找到的唯一例子是使用钩子(请参阅：)，而且我不确定如何使它能够在我的代码中使用。
到目前为止，我所得到的是这个多行生态器组件：
import React, { Component } from "react";
import { Polyline } from "react-leaflet";
import L from "leaflet";
import "leaflet-polylinedecorator";
e
浏览 3提问于2019-07-22得票数 3
回答已采纳
1回答
离子5单张-地图容器找不到
、、、、
我正在尝试将传单地图集成到我的应用程序中。
我在我的.ts文件中编写了以下代码：
ionViewDidEnter() {
this.leafletMap();
}
leafletMap() {
this.map = Leaflet.map('map').setView([49.992863, 8.247253], 5);
Leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© XY',
}).addTo(this.
浏览 9提问于2022-10-26得票数 0
我正在尝试访问react宣传单的上下文，但我不明白它是如何工作的
这是我尝试过的：
import { Map, TileLayer, Marker, Popup, LeafletContext } from 'react-leaflet';
...
render() {
<Map
center={position}
zoom={zoomInit}
onClick={this.handleClick}
ref={this.mapRef}
whenReady={this.mapRe
浏览 43提问于2018-07-12得票数 1
回答已采纳
2回答
从地图中移除反应传单中的缩放控制
、、、、
我正在构建一个反应传单应用程序，我试图将缩放控制与地图本身分开。同样的问题在一个香草传单的上下文中被问到：。这就是我试图在反应传单框架内完成的。以下是我的项目概要：
import UIWindow from './UIWindow'
import Map from './MapRL'
class App extends React.Component {
render () {
return (
<div className="App">
<Map />
浏览 2提问于2019-12-20得票数 3
回答已采纳
有两个数组，，共弦，和弹出窗口，使用传单，并在第一个数组的数据上显示。
我想知道如何在第一个和第二个数组的数据上显示？
在console.log上，我看到来自第二个数组的数据，但我不知道如何输入另一个map函数。
代码：
import React from "react";
import { Map as LeafletMap, TileLayer, Marker, Popup } from "react-leaflet";
import L from "leaflet";
const customMarker = new L.Icon({
浏览 1提问于2019-11-22得票数 0
回答已采纳
我这里有个有趣的案子！我正在使用一个在一个标记弹出
就像这样：
import React from 'react';
import { Map as LeafletMap, Marker, Popup, TileLayer } from 'react-leaflet';
import InputRange from 'react-input-range';
export default class MapPage extends React.Component {
constructor(props) {
super(props);
浏览 0提问于2018-08-06得票数 0
回答已采纳
1回答
我正在将一个项目从React迁移到NextJS，它有一个布局，其中公共组件是一个Leaflet Map。
在下一个JS中，用于加载映射的" Next /dynamic“
React使用的react路由器-dom@v6
布局代码：
import dynamic from "next/dynamic";
import React, { useMemo, useState } from "react";
const DynamicLeafletMap = dynamic(
() => import("../compon
浏览 15提问于2022-09-01得票数 1
尝试使用react-leaflet创建地图以显示基于新冠肺炎的全球数据。从API中获取数据并在地图上显示。地图没有显示地图中的数据，而是出现错误，如 无法读取未定义的单叶的属性'initialize‘ 初始化地图的map.js import React from 'react'
import '../componentsstyle/Map.css'
import {Map as MapContainer,TileLayer} from 'react-leaflet'
import { showDataOnMap } from '
浏览 11提问于2021-06-27得票数 0
我正在使用react-leaflet，并想在地图上添加一个图例。
我目前可以通过将map的ref传递给自定义组件并呈现null来实现，同时让函数创建HTML并将其添加到map中。使用Jest和Enzyme进行测试，裁判简直就是噩梦。
有没有办法使用react-leaflet组件来实现这一点？
浏览 18提问于2019-08-08得票数 2
回答已采纳
8回答
传单地图显示灰色
、、
我从leaflet.js开始用，但是我的地图显示为灰色..。我遗漏了什么吗？
script.js：
var leafletMap = L.map('leafletMap').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.title.cloudmade.com/' + API_KEY + '/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data © [...]',
maxZ
浏览 17提问于2014-01-28得票数 39
回答已采纳
我正在使用react-leaflet在我的react应用程序中创建地图。在Map组件中，我尝试映射一个国家数组，并返回每个国家的CirclrMarker。当我使用标记组件执行此操作时，它可以正常运行，但使用CirclrMarker组件时，代码会进入无限循环。
代码：
import React, { useState } from 'react'
import { Map, TileLayer, Marker, Popup, Circle, CircleMarker } from 'react-leaflet'
import L from 'leaflet
浏览 1提问于2020-10-26得票数 0
2回答
是否可能有中间体(2.5、3.5、4.5等)在使用的传单地图上缩放级别？这是我到目前为止计算缩放级别的代码：
leafletmap.on('zoomstart', function (d){
targetZoom = leafletmap.getZoom(); //Grabs whatever current zoom level is
targetZoom = targetZoom +.5; //Adds .5
leafletmap.setZoom(targetZoom); //Sets new value to zoom level
cons
浏览 3提问于2015-01-26得票数 4
回答已采纳
if(leafletMap == null){
leafletMap = L.map('mapDiv')
.setView(defaultLocation, defaultZoom)
Layer= L.tileLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}")
.addTo(leafletMap);
var tileOptions = {
浏览 2提问于2016-11-24得票数 1
回答已采纳
我有一个使用create- react -app工具创建的react应用程序，该应用程序使用typescript，在导入create-react-app和typescript库'@types/leaflet‘后，我的应用程序构建失败，并显示以下错误消息： Failed to compile.
node_modules/@react-leaflet/core/types/index.d.ts TypeScript error in .../node_modules/@react-leaflet/core/types/index.d.ts(3,1):
Declaration or st
浏览 49提问于2020-12-03得票数 2
回答已采纳
我想使用Leaflet.Polyline.SnakeAnim，我有一个问题。有没有在react-leaflet中创建自定义组件的例子？
浏览 41提问于2020-06-05得票数 1
回答已采纳
2回答
模板：
<div id="mapid" style="height: 500px"></div>
我已经安装了传单和传单的类型。当出现一个错误，说找不到map容器时，我添加了它的导入。
主计长：
import { Component, OnInit, EventEmitter, Output } from
'@angular/core';
import * as L from 'leaflet';
import { Map } from 'leaflet';
@Compo
浏览 3提问于2017-11-05得票数 1
回答已采纳
1回答
我想使用react-leaflet，并在其之上添加一个地理编码器字段。我发现了leaflet-control-geocoder，它看上去很棒，但没有反应包装，可以和react传单一起使用。有人这样做过，并且可以共享沙箱吗？或者它存在于GitHub上，而我没有使用正确的关键字？
谢谢你的帮助，最诚挚的问候
浏览 5提问于2021-01-05得票数 2
回答已采纳
1回答
我试图在reactjs中添加自定义按钮，以便缩放到传单地图--这是我的代码
import React, {Component} from 'react';
import { Map, TileLayer, Marker, Popup, ZoomControl } from 'react-leaflet';
import Control from 'react-leaflet-control';
import Button from '@material-ui/core/Button';
class LeafletMapCompo
浏览 1提问于2018-06-12得票数 1
1回答
我需要帮助从React-Leaflet创建GeoJSON自定义组件
使用React和React-Leaflet编写(两个版本都是最新版本)在Map组件中编写时，代码可以正常工作，但我想将其导入/导出为拆分代码
import React from 'react';
import { withLeaflet, GeoJSON } from 'react-leaflet'
import L from 'leaflet'
class CustomGesJSON extends GeoJSON {
getStyle(feature) {
浏览 0提问于2019-06-25得票数 0
1回答
我想在我的react项目中使用react-leaflet，但我不知道如何让它工作，当我试图编译我的代码时，我总是得到一个错误：
ERROR in ./node_modules/react-leaflet/src/index.js 5:7
Module parse failed: Unexpected token (5:7)
You may need an appropriate loader to handle this file type.
| export { LeafletConsumer, LeafletProvider, withLeaflet } from './conte
浏览 3提问于2018-08-13得票数 0
回答已采纳
1回答
我使用了leaflet和geojson-vt too displaing地图，以及一些矢量瓦片中的线条。我在geojson-vt中做了一些修改，因为我需要在切片时添加一些我的函数。当我从缩放1开始，然后通过鼠标滚轮增加缩放，例如zoom=15时，一切都很好。但当我使用zoom=启动我的地图时，例如示例7，就有一个问题。
var leafletMap = L.map('map').setView([52.00, 19.64], 7);
因为矢量瓦片不是从0到7计算的，而是只计算到7的，所以“我的函数”不能很好地工作。
我认为解决方案是从地图开始缩放0，然后在循环中将缩放增加到
浏览 2提问于2016-07-29得票数 0
回答已采纳
我正在为我的leaflet插件构建一个包装器。这是一个我希望人们能够作为npm包安装、导入和使用的组件。组件很简单：
import React from 'react'
import { Polyline } from 'react-leaflet'
import 'leaflet-arrowheads'
class ArrowheadsPolyline extends React.Component{
componentDidMount(){
const polyline = this.polylineRef.leafle
浏览 9提问于2020-02-10得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
