Карта под спойлером изменяет масштаб
Запихивая карту под спойлер, изменяется масштаб.
Юзаю leafletsjs Собсна весь код: Бери, вставляй, проверяй
<link rel="stylesheet" href="http://stopom.ru/wp-content/themes/wt_tera/maps/leaflet.css" />
<script src="http://stopom.ru/wp-content/themes/wt_tera/maps/leaflet.js"></script>
<script type="text/javascript">var coords = [
L.latLng(43.47103,40.5337),
L.latLng(43.47155,40.53335),
L.latLng(43.47174,40.53262),];</script>
<details>
<summary>Текст</summary>
<div id="map" style=" width: 720px; height: 480px;"></div>
</details>
<script type="text/javascript">
var map = L.map('map');
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '',
center: [43.47392,40.50802],
maxZoom: 15,
scrollWheelZoom:false,
}).addTo(map);
var line = L.polyline(coords, {
distanceMarkers: { showAll: 10, cssClass: 'some-other-class' }
});
var line = L.polyline(coords, {
distanceMarkers: { lazy: true }
});
L.marker([43.47509,40.5064]).addTo(map)
.bindPopup('Озеро Малая Рица')
.openPopup();
map.fitBounds(line.getBounds());
map.addLayer(line);
L.marker([43.47103,40.5337]).addTo(map)
.bindPopup('Озеро Рица')
.openPopup();
map.fitBounds(line.getBounds());
map.addLayer(line);
</script>
Без спойлера, отображается как надо. Как сделать, чтобы спойлер не менял масштаб? |
leaflet and details
veg,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
summary:focus{
outline: none;
}
</style>
</head>
<body>
<link rel="stylesheet" href="http://stopom.ru/wp-content/themes/wt_tera/maps/leaflet.css" />
<script src="http://stopom.ru/wp-content/themes/wt_tera/maps/leaflet.js"></script>
<script type="text/javascript">
var coords = [
L.latLng(43.47103,40.5337),
L.latLng(43.47155,40.53335),
L.latLng(43.47174,40.53262),];</script>
<details open="">
<summary>Текст</summary>
<div id="map" style=" width: 720px; height: 480px;"></div>
</details>
<script type="text/javascript">
var map = L.map('map');
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '',
center: [43.47392,40.50802],
maxZoom: 14,
scrollWheelZoom:false,
}).addTo(map);
var line = L.polyline(coords, {
distanceMarkers: { showAll: 10, cssClass: 'some-other-class' }
});
var line = L.polyline(coords, {
distanceMarkers: { lazy: true }
});
L.marker([43.47509,40.5064]).addTo(map)
.bindPopup('Озеро Малая Рица')
.openPopup();
map.fitBounds(line.getBounds());
map.addLayer(line);
L.marker([43.47103,40.5337]).addTo(map)
.bindPopup('Озеро Рица')
.openPopup();
map.fitBounds(line.getBounds());
map.addLayer(line);
document.querySelector('[open]').removeAttribute('open');
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 21:23. |