При создании Marker onClick маркер смещается, а не непосредственно там, где находится курсор мыши. - PullRequest
Новая
       69

При создании Marker onClick маркер смещается, а не непосредственно там, где находится курсор мыши.

0 голосов
/ 12 июля 2020

Я пытаюсь создать карту реакции-листовки, которая onClick создает маркер на широте и длине клика. Проблема в том, что маркер создается со смещением, ближе к нижнему правому краю, а не на курсоре мыши. 

import React, { useState, useContext } from "react";
import classes from "./WorldMap.module.css";
import { Map, TileLayer, Marker } from "react-leaflet";
import L from "leaflet";
import RoundInformationDisplay from "./RoundInfoDisplay/RoundInfoDisplay";
import ConfirmGuessButton from "./ConfirmGuessButton/ConfirmGuessButton";
import { AppContext } from "../../../../context/appContext";
interface Props {
  handleEndOfRound: () => void;
}
const WorldMap: React.FC<Props> = (props) => {
  const { currentRoundGuess, setCurrentRoundGuess } = useContext(AppContext);
  const icon = L.icon({ iconUrl: require("../../../../static/marker.svg") });

  const [selected, setSelected] = useState<boolean>(false);
  const handleMapClick = (e: any) => {
    setCurrentRoundGuess({ ...e.latlng });
    setSelected(true);
  };

  return (
    <div className={classes.WorldMapContainer}>
      <div className={classes.InfoDisplay}>
        <RoundInformationDisplay />
      </div>
      <Map
        center={[45.4, -75.7]}
        zoom={3}
        className={classes.Map}
        onClick={(e: any) => handleMapClick(e)}
      >
        {selected ? (
          <Marker
            position={[currentRoundGuess.lat, currentRoundGuess.lng]}
            icon={icon}
          />
        ) : (
          <p></p>
        )}
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      </Map>
      <div className={classes.ConfirmButton}>
        <ConfirmGuessButton
          selected={selected}
          handleEndOfRound={props.handleEndOfRound}
        />
      </div>
    </div>
  );
};
export default WorldMap;

Видео, демонстрирующее проблему: https://streamable.com/g5uusl

Что могло быть причиной этой проблемы? Заранее спасибо.

1 Ответ

1 голос
/ 14 июля 2020

Как было упомянуто в комментариях, свойство icon.iconanchor позволяет выровнять положение значка относительно местоположения маркера, в случае библиотеки react-leaflet свойство icon.iconanchor может быть указано, как показано ниже: 

function MapExample(props) {
  const [selectedPos, setSelectedPos] = useState(props.center);
  

  function getMarkerIcon() {
    const icon = new L.Icon({
      iconSize: [32, 37], // size of the icon
      iconAnchor: [16, 37], 
      iconUrl: "/bigcity_green.png",
    });
    return icon;
  }

  function handleMapClick(e) {
    setSelectedPos(e.latlng);
  }

  return (
    <Map center={props.center} zoom={props.zoom} onclick={handleMapClick}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      {selectedPos && <Marker position={selectedPos} icon={getMarkerIcon()} />}
    </Map>
  );
}
...