反应传单标记偏移量变化答案

【问题标题】：React Leaflet Marker offset change反应传单标记偏移量变化
【发布时间】：2022-08-18 16:58:54
【问题描述】：

我的标记笔尖并没有准确地出现在它应该出现的地方。您将在我将在下面添加的屏幕输出中更清楚地看到它。我为图标写了一些属性L.Icon.Default.mergeOptions但它没有用我使用此代码


let DefaultIcon = Leaflet.icon({
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40],
  iconUrl: \'https://unpkg.com/leaflet@1.6/dist/images/marker-icon.png\',
  shadowUrl: iconShadow,
});

Leaflet.Marker.prototype.options.icon = DefaultIcon;

//Third Party imports
import L from \'leaflet\';
import { MapContainer, TileLayer, Marker, Popup } from \'react-leaflet\';
import { useMap } from \'react-leaflet\';
import { latLngBounds } from \'leaflet\';
import \'leaflet/dist/leaflet.css\';
//Components imports
import { PieChart, BarChart, LineChart } from \'components\';
//Utils import
import { getCenterMapCoordinates } from \'utils/getCenterMapCoordinates\';
import {
  CoordinatInterface,
  DataSourceforRouting,
  GridDataTypes,
} from \'types/Map\';

delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require(\'leaflet/dist/images/marker-icon-2x.png\'),
  iconUrl: require(\'leaflet/dist/images/marker-icon.png\'),
  shadowUrl: require(\'leaflet/dist/images/marker-shadow.png\'),
});

type DefaultMapWithPopupProps = {
  dataSource: any[];
  height?: string;
  width?: string;
  chartType?: string;
};

function ChangeView({ center, markers }: any) {
  const map = useMap();
  map.setView({ lng: center.latitude, lat: center.longitude });
  let markerBounds = latLngBounds([]);
  markers.forEach((marker: any) => {
    markerBounds.extend([marker.latitude, marker.longitude]);
  });
  map.fitBounds(markerBounds);
  return null;
}

const MapWithPopup = ({
  height,
  chartType,
  dataSource,
}: DefaultMapWithPopupProps) => {
  // const [dataSource, setDataSource] = useState<GridDataTypes[]>([]);
  const [centerForMap, setCenterForMap] = useState<CoordinatInterface>();
  const markersLatLon: CoordinatInterface[] = dataSource?.map(item => ({
    latitude: item.lattitude,
    longitude: item.longitude,
  }));

  useEffect(() => {
    const center: CoordinatInterface | any =
      getCenterMapCoordinates(markersLatLon);
    setCenterForMap(center);
  }, [dataSource]);

  return (
    <>
      {centerForMap ? (
        <MapContainer scrollWheelZoom={true} style={{ height: `${height}` }}>
          <TileLayer
            attribution=\'&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors\'
            url=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\"
          />
          {centerForMap && (
            <ChangeView center={centerForMap} markers={markersLatLon} />
          )}
          {dataSource.map((atm: any, index: number) => {
            return (
              <Marker key={index} position={[atm.lattitude, atm.longitude]}>
                <Popup maxWidth=\"100%\">
                  <strong>Customer Id : </strong>
                  {atm.id}
                  <br />
                  <strong>address : </strong>
                  {atm.address}
                  <br />
                  <strong>province : </strong>
                  {atm.province}
                  <br />
                  <strong>district : </strong>
                  {atm.district}
                  <br />
                  <strong>sales person : </strong>
                  {atm.salesPerson}
                  <br />
                  <strong>weekly visits : </strong>
                  {atm.weeklyVisits}

                  {/* {chartType && (
                <div className=\"chartWrapper\">
                  {chartType === \'line\' && (
                    <LineChart
                      dataSource={atm.info1}
                      argumentField=\"country\"
                      subtitle=\"line Chart\"
                      title=\"Line Chart Title\"
                    />
                  )}

              )} */}
                </Popup>
              </Marker>
            );
          })}
        </MapContainer>
      ) : (
        <p>Loading...</p>
      )}
    </>
  );
};

export default MapWithPopup;

正如您在图片中看到的，标记应该显示那个蓝点，但它显示的是海的中间。

标签： reactjs leaflet react-leaflet react-leaflet-v3 react-leaflet-v4

【解决方案1】：

let DefaultIcon = Leaflet.icon({
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40],
  iconUrl: 'https://unpkg.com/leaflet@1.6/dist/images/marker-icon.png',
  shadowUrl: iconShadow,
});

Leaflet.Marker.prototype.options.icon = DefaultIcon;

然后我把标记“图标”属性

  <Marker
                key={index}
                position={[atm.lattitude, atm.longitude]}
                icon={DefaultIcon}
              >

【讨论】：