反应传单中的地图标记未正确显示图像

Question

我对在 react-leaflet 中创建地图标记感到困惑；一些文档似乎已过时，我在其他网站上看到了相互矛盾的答案。

官方文档设置中的默认 <Marker> 组件，没有 icon 属性描述，在地图中显示为矩形缩进。本质上它有一个阴影但没有实际的标记图标。如果 icon 设置为 const 导入某个图像文件，则标记显示为该图像的压缩版本。我尝试将 icon 设置为 'leaflet/dist/images/marker-icon.png' 但它看起来很奇怪，因为边缘模糊并且图标本身看起来扭曲（水平压缩 - 显然 25x55 是我从其他地方复制的尺寸但它们看起来不默认为正确）。

在 react-leaflet 中呈现正常的、默认的、标准的地图标记的正确方法是什么？

我的代码（带有来自 leaflet/dist 的压扁图标）在这里：

import './App.css';
import 'leaflet/dist/leaflet.css';
import L, { divIcon } from 'leaflet';
import bear1 from './bulgaria-bear-1.jpg';
import bear2 from './bulgaria-bear-2.jpg';
import bear3 from './bulgaria-bear-3.jpg';
import markerIcon from 'leaflet/dist/images/marker-icon.png';
import React, { useState, useEffect } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

[...]

function PageMap(props) {
  const markerIconConst = L.icon({
    iconUrl: markerIcon,
    iconRetinaUrl: markerIcon,
    iconAnchor: [5, 55],
    popupAnchor: [10, -44],
    iconSize: [25, 55],
  });
  return (
    <div classname="App">
      <MapContainer id="mapid" center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker icon={markerIconConst} position={[51.505, -0.09]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
      <p classname="App-header">
        <button onClick={(() => props.navigate('Home'))}>
          Home
        </button>
      </p>
    </div>
  );

作为一个附加问题，我想知道为什么我的另一个 CSS 没有加载到地图页面上，例如按钮设置为“App-header”，这意味着与中心。按钮显示但左对齐。 MapContainer 是否接管了整个页面 CSS?

Answer 1

您的代码看起来是正确的。传单标记的尺寸为 24x41。对于按钮样式，将大写“N”添加到 className（而不是 classname = "App-header"）。

您可以在此处找到演示：Stackblitz

Answer 2

我已经在分步教程中使用 React 和传单创建自定义图像标记。

import L from 'leaflet';

export const VenueLocationIcon = L.icon({
  iconUrl: require('../assets/venue_location_icon.svg'), 
  iconRetinaUrl: require('../assets/venue_location_icon.svg'),  
  iconAnchor: null,
  shadowUrl: null,
  shadowSize: null,  
  shadowAnchor: null,
  iconSize: [35, 35],
  className: 'leaflet-venue-icon'
});

反应传单中的地图标记未正确显示图像

Map markers in react-leaflet not showing image correctly

reactjs

leaflet

react-leaflet