diff --git a/src/map/CurrentLocation/index.tsx b/src/map/CurrentLocation/index.tsx index 1710a18..663110b 100644 --- a/src/map/CurrentLocation/index.tsx +++ b/src/map/CurrentLocation/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, useState, useEffect } from 'react'; +import React, { FC, useState, useEffect, useCallback } from 'react'; import { LatLngLiteral, marker, Marker, DivIcon } from 'leaflet'; import { MainMap } from '~/constants/map'; @@ -7,6 +7,8 @@ interface IProps { } const CurrentLocation: FC = ({ location }) => { + const zoomToLocation = useCallback(({ latlng }) => MainMap.setView(latlng, 17), [MainMap]); + useEffect(() => { if (!location) return; @@ -15,17 +17,21 @@ const CurrentLocation: FC = ({ location }) => { html: `
- - - + + + + +
`, }), - }).addTo(MainMap); + }) + .on('click', zoomToLocation) + .addTo(MainMap); return () => item.removeFrom(MainMap); - }, [MainMap, location]); + }, [MainMap, location, zoomToLocation]); return null; }; diff --git a/src/styles/map.less b/src/styles/map.less index 671303e..863fb43 100644 --- a/src/styles/map.less +++ b/src/styles/map.less @@ -340,7 +340,15 @@ } .current-location { + width: 0; + height: 0; + position: relative; + svg { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); fill: @bar_background; stroke: white; stroke-width: 0.2px;