我试图找到许多与此有关的东西，但我无法使其正常工作。我要的是单击标记图时使该位置居中并获得完全缩放。例如，我在Unites各州周围总共有23个标记，初始地图缩放为4。我要的是，如果用户单击地图中的标记，然后地图中心更改为该标记lat，lng，并假设放大比例从4放大到14标记已经渲染，我不希望在函数MyMapComponent中渲染标记。它来自API数据。没有线索怎么做。我尝试过useMapEvents，但它适用于地图单击而不是标记单击，如果我使用标记eventHandlers单击，则无法调用地图useMapEvents来设置纬度，经度和更改缩放。
这是我的代码：
function MyMapComponent() {
const map = useMapEvents({
click: () => {
let data = {lat: 46.8835319, lng: -114.0348327}
map.flyTo(data, 18)
}
})
return null}
上面的代码是我需要更改地图中心和缩放
<div className="project-view-section">
<MapContainer bounds={outerBounds} center={[37.2755, -104.6571]} zoom={mapOptions.zoom} scrollWheelZoom={false}>
<MyMapComponent />
<LayersControl position="topright">
<LayersControl.BaseLayer checked name="Mapbox Satellite">
<TileLayer
url={'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/256/{z}/{x}/{y}@2x?access_token='+MAPBOX_TOKEN}
attribution="Map data © <a href="https://www.mapbox.com/">Mapbox</a>"
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Mapbox Streets">
<TileLayer
url={'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}@2x?access_token='+MAPBOX_TOKEN}
attribution="Map data © <a href="https://www.mapbox.com/">Mapbox</a>"
/>
</LayersControl.BaseLayer>
</LayersControl>
<MarkerClusterGroup>
{
state.markersData.map((element, index) =>
<Marker
key={index}
marker_index={index}
position={element}
icon={icon}
eventHandlers={{click: () => {test()},}}>
</Marker>
)
}
</MarkerClusterGroup>
</MapContainer>
</div>
有什么办法可以做到这一点？
您应该eventHandlers在Marker上使用prop并监听click事件。然后使用本机传单的代码：map.setView(coords, zoom)
function Markers({ data }) {
const map = useMap();
return (
data.length > 0 &&
data.map((marker, index) => {
return (
<Marker
eventHandlers={{
click: () => {
map.setView(
[
marker.geometry.coordinates[1],
marker.geometry.coordinates[0]
],
14
);
}
}}
key={index}
position={{
lat: marker.geometry.coordinates[1], // your api structure
lng: marker.geometry.coordinates[0] // your api structure
}}
icon={icon}
>
<Popup>
<span>{marker.properties.label}</span>
</Popup>
</Marker>
);
})
);
}
然后将Markers comp用作MapContainer子级。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句