react-leaflet地图在Ionic 5中显示不正确
问题描述：react-leaflet地图在Ionic 5中显示不正确。
回答： react-leaflet是一个基于React的地图库，用于在Web应用中显示地图。Ionic 5是一个用于构建混合移动应用的开发框架。在使用Ionic 5开发应用时，如果react-leaflet地图显示不正确，可能是由于以下原因导致的：
- 版本兼容性问题：确保你使用的react-leaflet和Ionic 5版本是兼容的。可以查看官方文档或社区支持来获取相关信息。
- 样式冲突：Ionic 5可能会有自己的样式定义，可能与react-leaflet的样式冲突。可以尝试在地图组件上添加自定义样式或调整Ionic 5的样式以解决冲突。
- 容器尺寸问题：地图组件需要一个固定的容器尺寸来正确显示。确保地图容器的尺寸设置正确，可以使用CSS或Ionic 5的布局组件来控制容器尺寸。
- 地图数据加载问题：如果地图数据加载不正确，可能是由于网络连接问题或地图数据源的配置错误导致的。检查网络连接是否正常，并确保地图数据源的配置正确。
如果以上方法都无法解决问题，可以尝试以下步骤：
- 检查控制台错误：在浏览器的开发者工具中查看控制台输出，看是否有任何错误信息。根据错误信息来调试和解决问题。
- 查阅文档和社区支持：查阅react-leaflet和Ionic 5的官方文档，以及相关的社区支持论坛或问答平台，寻找类似问题的解决方案或向其他开发者寻求帮助。
腾讯云相关产品推荐： 腾讯云地图服务（https://cloud.tencent.com/product/maps）：提供了丰富的地图数据和功能，可以用于在应用中显示地图，并提供地理编码、逆地理编码、路径规划等功能。
腾讯云移动应用分析（https://cloud.tencent.com/product/ma）：可以用于分析和监控移动应用的使用情况，包括地图使用情况、用户行为等，帮助开发者优化应用。
以上是针对react-leaflet地图在Ionic 5中显示不正确的一般性解决方法和腾讯云相关产品推荐，具体解决方案可能因具体情况而异，建议根据实际情况进行调试和解决。
相关·内容
当我试图在移动视图中显示地图时，我看到了损坏的地图： ? https://stackoverflow.com/a/36257493/13739566 -在这个链接中描述了为什么它不起作用，但在我的例子中使用'invalidSize()‘不起作用(或者我可能用错了)。这是我的代码： import React from 'react';
import { IonContent, IonApp, IonHeader} from '@ionic/react';
import { Map as Maps, Marker, Popup, TileLaye
浏览 27提问于2020-06-17得票数 0
回答已采纳
我使用来显示地图。我使用 ()在地图上显示一层多边形。
虽然我可以改变多边形的填充(fillOpacity)的不透明度，但我找不到用模式填充多边形的选项(例如，棋盘、条纹等)。
我已经找到了一个项目()，它支持向Leaflet.js形状添加填充模式，但是它还没有被用于React-Leaflet。
因此，我的问题是:如何向React-Leaflet形状中添加模式，或者如何使Leaflet.pattern与React-Leaflet一起使用？(对于后者，关于如何创建自定义React-Leaflet组件的说明是，但我不知道如何处理这种情况-它似乎比平常更复杂)
浏览 2提问于2018-10-27得票数 0
回答已采纳
当在地图上移动鼠标并将其显示为mapContainer下的文本时，是否有任何有效的解决方案可以在react-leaflet中获取纬度和经度？对于react-leaflet事件是否有明确的文档？
浏览 77提问于2021-03-09得票数 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
回答已采纳
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
1回答
我使用react-leaflet在此地图上显示latLng位置作为标记，使用OSM (开放街道地图)。，我的标记和地图的中间，总是在地图的左上角对齐。
我希望地图居中，这样标记就在地图周围框的中心，但它似乎不起作用。
有谁有主意吗？
浏览 4提问于2020-06-03得票数 1
回答已采纳
我在用react-leaflet。在我的react应用程序中显示地图。我也在地图上显示了标记。问题是缩放级别是不合适的，因为有时标记可能彼此非常接近，而有时它们又会相距很远。有没有办法根据标记的距离设置缩放级别，以便用户可以一次看到所有标记？
以下是我的代码
<Map center={center} maxZoom={9} zoom={5}>
<MarkerClusterGroup showCoverageOnHover={false}>
{
markers.map(({fillColor, position, id}) =>
浏览 12提问于2020-05-06得票数 2
3回答
我正在使用react-leaflet地图来显示自定义地图(非地理)，地图大小也是动态的，我需要根据组件和地图大小之间的比例来计算缩放级别。
有没有一种原生的reactJs方法来计算加载的组件大小？
浏览 51提问于2018-01-11得票数 1
回答已采纳
4回答
如何获得标记集合的边界，以便这些边界可用于显示react-leaflet映射上的所有标记？这是我的渲染功能：
render() {
const position = [51.505, 4.12];
return (
<Map center={position} zoom={3} style={{width: '100%', height: '600px'}} >
<TileLayer
attribution='© <a hre
浏览 2提问于2017-01-29得票数 3
如果有人能帮我的话我会很高兴的。我已经在我的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
回答已采纳
我想为我的项目渲染地图。为此，我使用代码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贴图，此时用一根手指拖动贴图是禁用的。
我想要显示一条消息，当地图向任何方向滑动时，使用两个手指移动地图。
有没有人能帮我实现一下？
浏览 9提问于2018-02-09得票数 0
回答已采纳
1回答
我正在尝试使用附自定义地图的React传单来将我的项目从javascript切换到React。
我遇到了一些困难，当我将tileLayer url设置为本地地图文件时，地图容器只会显示其他任何东西，只有灰色的空地图。
下面是使用openstreetmap的代码：
import './Map.css';
import { MapContainer, TileLayer, useMap } from 'react-leaflet';
function Map() {
const center = [51.505, -0.09]
return
浏览 7提问于2022-09-15得票数 2
1回答
刚刚使用以下命令创建了一个带有地图模板()的ionic项目：
ionic start MyMap maps
在浏览器中运行项目时：
ionic serve
谷歌地图地图显示完美。但是，如果我尝试在模拟器或设备中运行它：
ionic platform add android
ionic run android // or
ionic run emulate
谷歌地图根本无法加载。我得到一个带有页眉和页脚的空白屏幕。我是不是遗漏了什么？在使用模板创建项目后，我没有更改项目的一行代码。
浏览 0提问于2015-06-27得票数 0
1回答
当使用带有链接的选项卡时，我无法在ionic 3应用程序中显示google地图。
我有3个选项卡，在1个选项卡中，我也为用户提供了谷歌地图的链接。
假设我当前的标签名是AddressPage，当我点击链接显示谷歌地图时，我将转到带有nav.push()和离子标题加载的MapPage，但我在屏幕中间看不到谷歌地图，它在地图页面中间显示我上一页的AddressPage内容。
我确信我在那里有谷歌地图，因为我在ion内容中有一个按钮，它显示了标记的当前最新\lng，它可以工作，但地图不在那里。
我使用safari对应用程序进行调试，当我将所有ion-app设置为空时，google地图就会显示出来。所
浏览 1提问于2018-10-08得票数 0
1回答
我的地图有点问题。一个react-leaflet地图。当我在上面加载我的网站时，它就会显示出来。但在其他方面，比如点击一个链接，它不起作用，我只是在滚动时一个接一个地加载左上角的磁贴。 以前有人遇到过这个问题吗？还是有人想出了一个主意？ 一个例子：http://www.noelshack.com/2019-02-1-1546872914-capture.png import React, { Component } from 'react';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet
浏览 8提问于2019-01-07得票数 4
回答已采纳
我使用React-leaflet来生成一个使用纬度和经度的动态地图。现在，我必须在pptx和doc文件中显示该映射。有没有什么方法可以将此地图导出为图像或byte64格式，以便将其包含在我生成的PPT文件中。
我尝试了几个例子，但似乎都不起作用。
浏览 5提问于2018-05-05得票数 3
2回答
我需要关于我的地图应用程序的react-leaflet的帮助。我正在尝试添加一个加载函数，一旦客户端登录到地图上，该函数将在加载时执行。但在react-leaflet上，没有onLoad。 现在我只有这样的想法： function CenterCoords() {
const map = useMapEvents({
// TODO resolve onload
layeradd() {
map.locate()
console.log('loading')
},
浏览 63提问于2021-06-14得票数 0
1回答
Geojson未在地图上显示
、、、、
我想创建一个使用geojson从"countries.json“下载国家的covid地图，遗憾的是，这些国家没有在地图上显示。
这里是指向我的工作效果的链接：And这里是指向源code:It的链接，如下所示：
救命..。
import React from 'react';
import {Map , GeoJSON, MapContainer} from 'react-leaflet';
import "leaflet/dist/leaflet.css"
const CovidMap = ({countries}) =>
浏览 8提问于2021-04-20得票数 0
回答已采纳
我是新来的反应-传单。我正在做一个Flask React项目，我正在尝试加载一个react-leaflet地图。我得到以下错误：
Uncaught TypeError: Cannot use 'in' operator to search for 'default' in undefined
at react-leaflet.js:7
at React__default (react-leaflet.js:4)
at react-leaflet.js:5
版本：
react-leaflet : v1.9.1 leaflet.css : v1.3.1 react-
浏览 0提问于2018-04-24得票数 1
我有来自React-leaflet的基本示例，但对于我来说，我无法获得任何可显示的东西。我使用来自Jeremy Monson的this fix来解决常见的巴别塔加载程序问题。当我浏览manual fixes时，我也遇到了同样的问题，没有显示。现在我正在使用样式组件，但是我在使用常规CSS时遇到了同样的问题。我的地图组件页面如下所示。 import React from 'react'
import styled from '@emotion/styled'
import { MapContainer, TileLayer, Marker, Popup } fr
浏览 31提问于2021-10-25得票数 0
我使用的是react-leaflet地图，运行时我必须更新标记的方向，我使用的是带有react-leaflet的leaflet-rotatedmarker库。标记方向在加载和重新加载时工作良好，但在收到道具的值后没有更新。
<Marker
key={1}
position={{ lat: position.latitude, lng: position.longitude }}
rotationAngle={position.course}
rotationOrigin="center"
icon={L.icon({
iconUrl: "x
浏览 0提问于2019-07-23得票数 3
回答已采纳
我有一个错误，
Attempted import error: 'LeafletProvider' is not exported from 'react-leaflet'.
当我尝试将LeafletProvider导入到我的一个组件文件时，如下所示：
import { withLeaflet, MapControl, LeafletProvider } from "react-leaflet";
我相信我已经安装了最新版本的react-leaflet (v.3.2.2)，并且已经尽可能多地阅读了文档，但我没有在其中看到LeafletProvid
浏览 7提问于2021-10-20得票数 0
使用react-leaflet时，是否可以更改地图框切片的切片大小 渲染的瓷砖的文本看起来太小了，这让我认为这些是512px的瓷砖被Leaflet视为256px的瓷砖。我在连接到Macbook Pro (带Retina屏幕)的外接显示器上遇到了这种情况。不确定视网膜屏幕是否有影响。 已查看react-leaflet docs for TileLayer，但它未公开tileSize参数。Mapbox's tile URL template也不接受用于定义块大小参数。 有没有其他方法可以调整瓷砖的大小？谢谢! import { MapContainer, TileLayer, Marke
浏览 21提问于2021-02-08得票数 0
回答已采纳
一直试图得到一个按钮工作在一个小应用程序，我已经建立了使用Ionic框架。
这个按钮现在有一个非常简单的工作，点击显示地图上的指示。当在控制器内调用该函数时，它在地图上显示，但当我试图通过单击调用它时，我无法获得显示的指示。
想知道这个问题会是什么。
var directionsDisplay = new google.maps.DirectionsRenderer({
map: $scope.map
});
$scope.show_dirs = function(){
var request = {
destination: locations[3],
origin: tem
浏览 0提问于2016-04-12得票数 0
回答已采纳
我正在尝试创建一个小地图，但是由于某些原因，react-leaflet渲染了两次地图。我认为它的容器不够大，无法容纳地图，所以它将其转换出来，但我不知道它应该有多大。文档并没有真正提到这一点。 import React from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';
const MapStyle = {
height: '100px',
width: '100px',
浏览 22提问于2021-04-14得票数 0
回答已采纳
我有一个，它有一个在服务器端呈现的反应传单地图。地图显示得很好，但是当我添加一个单击事件处理函数传递给父组件时，我会遇到一个错误：不能分解'reactLeaflet‘的属性'MapContainer’，因为它是null --这是子组件中的代码：
const MyMap = (props, ref) => {
const [ reactLeaflet, setReactLeaflet ] = useState(null);
const [ position, setPosition ] = useState(null);
useEffect
浏览 6提问于2021-10-15得票数 0
1回答
刚刚开始使用react-leaflet和leaflet。在点击一个标记后，我想要在地图上有一个全屏幕覆盖，以显示图形。但无论我如何设置和的z索引，覆盖总是位于地图的下方。无法找到答案，因为大多数z索引问题适用于组件中的地图层等。
.overlay-wrapper {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
z-index: 200;
cursor: pointer;}
它应该是非常直截了当的，请给我指出正确的方向
浏览 4提问于2017-08-19得票数 1
1回答
我正在使用IONIC2，我已经实现了地图，并在地图上放置了标记。我可以得到地图点击侦听器，但不能让标记单击侦听器。
我也尝试过addlistener，但无法获得标记的单击事件。
下面是我在地图上添加标记的代码：
addMarkerOnMap(latLng1: GoogleMapsLatLng, depotsEntity: DepotsEntity) {
/**
* To add marker in the map, need to initialize GoogleMapsMarkerOptions
*/
let options: GoogleMapsMarkerOptions = {
浏览 1提问于2016-08-02得票数 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
2回答
目标是在地图上显示标记。
我不明白为什么我的标记不显示
我用的是反应传单
响应正常，但没有显示任何内容。
导入
import { MapContainer, TileLayer, Marker, ScaleControl } from 'react-leaflet';
import tileLayer from '../util/tileLayer';
import L from "leaflet";
import 'leaflet-fullscreen/dist/Leaflet.fullscreen.js';
import
浏览 6提问于2022-05-13得票数 0
我正在使用react-leaflet，并想在地图上添加一个图例。
我目前可以通过将map的ref传递给自定义组件并呈现null来实现，同时让函数创建HTML并将其添加到map中。使用Jest和Enzyme进行测试，裁判简直就是噩梦。
有没有办法使用react-leaflet组件来实现这一点？
浏览 18提问于2019-08-08得票数 2
回答已采纳
我使用react-leaflet显示带有从API加载的动态标记的地图。直到现在，我一直在渲染中加载标记，但我意识到这是不必要的重新绘制整个传单地图每次任何变化(例如缩放，位置)。我认为我可以移除缩放和定位状态，并为这些调用本地传单函数，但最终我需要在初始呈现之后加载数据，至少会产生第二个不必要的呈现。反应是否真的被设计成这是首选的方式？
function MyMap() {
const [markers, setMarkers] = useState([]);
useEffect(() => {
console.log('useEffect');
浏览 0提问于2020-06-03得票数 2
我的React应用程序正在使用react-leaflet & react-leaflet-markerclusterer显示带有标记簇的传单地图。
但是，我无法让地图显示地图视图中的所有集群标记。我正在尝试到打字稿。
控件中显示的错误之一。JS控制台是
React "useMap“不能在回调中调用。必须在React函数组件或自定义React函数中调用。
在VSCode中，还有一个类型记录错误
对象可能是“未定义”..ts(2532)
在线上
const groupBounds = group.getBounds();
为什么会发生这种情况，以及编写这种类型记录代
浏览 2提问于2021-02-18得票数 1
回答已采纳
1回答
这是我第一次使用反应传单。我所做的和在中显示的一样，但是当第一次加载页面时，地图是灰色的。但是，如果要调整浏览器的大小，则地图将正确呈现并显示地图。
index.js
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR
浏览 4提问于2020-12-14得票数 0
回答已采纳
我正在构建一个室内位置的反应地图，我需要处理建筑物的水平。react-leaflet能处理这个吗？，我是地图的新手。这是一个用ruby构建的示例，关于我正在讨论的内容： ? ?
浏览 94提问于2021-11-02得票数 1
当用户单击某个Geojson功能时，我试图添加标记。我是新的反应和反应传单和尝试使用useState钩子来完成这项任务。我在这个问题上被困了几天。
这是我的App.js。我导入数据，为标记创建状态变量和setter，并将这些项传递给组件<MyData/>和<MyMarkers/>。
import "./styles.css";
import React, { useState } from 'react'
import {MapContainer, TileLayer} from 'react-leaflet'
impor
浏览 2提问于2021-08-26得票数 0
回答已采纳
我在react-leaflet地图上工作，我想代理瓦片URL请求。请帮助我如何覆盖当前的URL并将其更改为我的代理URL。
浏览 0提问于2018-04-03得票数 0
尝试使用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
我从TFL的API中得到了所有自行车点的"lat“和"lng”。我正在尝试将所有的自行车点显示为React-leaflet地图上的标记。
我已经成功地获得了数据，并将其过滤为正确的格式51.505，-0.09，并将每个数据映射到标记上
component <Marker position={data.position} /> .
问题是标记没有显示在地图上。
我已经对一些数据进行了硬编码，而且工作正常，所以我不知道我在实时数据上做错了什么。如果有人能帮助我，我将不胜感激。我整晚都被困在这上面了。
这是我在Jsfiddle中遇到的问题：
！
浏览 0提问于2019-04-19得票数 1
我想在仪表板上显示路由机控制div (像google地图那样的侧边栏)，而不是map div，因为它正在覆盖移动版本的地图。有什么更简单的方法吗？我尝试过以下两种方法：，
我有3个组件MapComponent、RoutingMachine和仪表板。
RoutingMachine.jsx
import React from "react";
import L, { control, Map, map, routing } from "leaflet";
import { createControlComponent } from "@react-leafl
浏览 12提问于2022-03-04得票数 0
回答已采纳
我必须添加我的项目与谷歌地图地图视图。我遵循了，但它不起作用。
我给包含地图的div分配了粉红色的背景色(用于测试)，在将地图添加到div之前，div显示正确。但是，当贴图添加到div时，模式窗口的背景将变为透明，并且div将消失。但是没有显示错误。
我尝试了不同的方法将贴图附加到div上，但结果是相同的。
当我使用离子文档的代码时，我得到了这样的错误消息："GoogleMaps已弃用，请使用GoogleMaps.create()“。我尝试使用GoogleMaps.create()而不是构造函数的参数来避免此错误消息，但仍然不起作用。
我的离子内容：
<ion-content f
浏览 1提问于2017-11-16得票数 2
我试图简单地导入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，以便仅在搜索栏中给定的位置周围显示标记。自然，每当地图加载时，我的数据库中的每个标记都会显示在整个地图上，而不仅仅是靠近给定位置的标记。
我确实尝试过使用边界和boundsOptions，认为它可以解决我的问题，但我只得到了一个错误，说有“太多的递归”。
下面是我使用的代码：
import React, { useState, useEffect, useContext } from 'react';
import MapsAPI from "../services/mapsAPI";
import { Map, Mar
浏览 2提问于2020-07-03得票数 0
3回答
我可以捕获单次单击事件。
<Circle onClick={ (event) => this.seatClickHandler(event, seat) } ... />
但是我也想捕捉到双击事件，这在react-leaflet中是可能的吗？
我已经在双击中禁用了zoom-in地图，所以如果有一个事件的地图，那么应该是什么东西可用的多边形？
浏览 1提问于2018-07-09得票数 3
回答已采纳
我想在android / IOS中创建一个移动应用程序，我正在考虑使用ionic。
ionic有能力在离线时在地图上显示我的特定磁贴吗？
我应该使用ionic 3，还是之前的版本？
浏览 0提问于2018-09-30得票数 0
我正在使用ionic 3，我的地图在桌面浏览器上显示良好；然而，它在Android手机上显示一个白屏(我正在使用IONIC DEV-APP在我的手机上运行它)。
浏览 0提问于2018-03-28得票数 0
我正在通过使用。
我有一个在地图或列表中显示的地点索引(称为EstablishmentsPage)。在地图上，我听到了点击标记的声音，然后显示了detailPage。列表上只有一个按钮。
映射：
marker.on(GoogleMapsEvent.MARKER_CLICK)
.subscribe(() => {
this.navCtrl.push(EstablishmentPage, { establishment });
})
列表：
onClick(establishment: Establishment) {
this.navCtrl.pus
浏览 16提问于2018-03-01得票数 1
回答已采纳
3回答
我有一些简单的组件来选择地图上的点，然后显示与这一点相关的一些GeoJSON数据：
import React, { Component } from 'react';
import { Map, Marker, TileLayer, GeoJSON } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import { connect } from 'react-redux';
import './style.css';
import { set
浏览 5提问于2017-05-24得票数 18
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
