Форум

veg · #1 (**permalink**) 30.09.2016, 10:05

Запихивая карту под спойлер, изменяется масштаб.
Юзаю 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>

Без спойлера, отображается как надо.
Как сделать, чтобы спойлер не менял масштаб?

рони · #2 (**permalink**) 30.09.2016, 11:54

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>

Форум

Справочник

Discord чат

Курсы javascript