Сделайте маркер анимированным, чтобы удвоить его размер при клике - PullRequest
Новая
       9

Сделайте маркер анимированным, чтобы удвоить его размер при клике

0 голосов
/ 25 января 2019

Я пытаюсь изменить размер divicon, когда на него нажимают.Я попытался добавить CSS, но он не работает.

У меня есть базовая скрипка, чтобы показать пользовательский divIcon, но я не уверен, добавлять ли событие onclick в маркер или добавить кнопку где-нибудь еще, чтобы вызвать щелчок,Я хотел бы оживить это, чтобы удвоить размер, но держать его в правильном месте.Любые предложения, с которых вы начинаете или если я пытаюсь использовать неправильный метод, были бы хорошими, спасибо

Скрипка

HTML-код: 

<div id="map"></div>

CSS: 

body {
  padding: 0;
  margin: 0;
}

html,
body,
#map {
  z-index: 1;
  height: 100vh;
  width: 100vw;
}

/* Counter-productive?
.location-pin {
  display: inline-block;
  position: relative;
  top: 50%;
  left: 50%;
}*/

.location-pin img {
  width: 46px;
  height: 46px;
  margin: -26px 0 0 -13px;
  z-index: 10;
  position: absolute;
  border-radius: 50%;
  background: #32383e;
}

.pin {
  width: 50px;
  height: 50px;
  border-radius: 50% 50% 50% 0;
  background: #32383e;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -43px 0 0 -30px;
}

.pin:after {
  content: '';
  width: 26px;
  height: 26px;
  margin: 2px 0 0 2px;
  position: absolute;
  border-radius: 50%;
}

.pulse {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  height: 14px;
  width: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 15px 0px 0px -12px;
  transform: rotateX(55deg);
  z-index: -2;
}

.pulse:after {
  content: "";
  border-radius: 50%;
  height: 40px;
  width: 40px;
  position: absolute;
  margin: -16px 0 0 -13px;
  animation: pulsate 2.5s ease-out;
  animation-iteration-count: infinite;
  opacity: 0;
  background: rgba(94, 190, 255, 0.5);
  box-shadow: 0 0 1px 2px #2d99d3;
  animation-delay: 1.1s;
}

JS: 

var zoom = 10;
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = 'Map data © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {
  attribution: osmAttrib,
  detectRetina: true
});

window.map = new L.Map('map', {
  layers: [osm],
  minZoom: 2,
  maxZoom: 18,
  center: [51.505, -0.09],
  zoom: 10,
  zoomControl: false

});

var myIcon = L.divIcon({
  className: 'location-pin',
  html: '<img src="https://www.faces2places.co.uk/img/jules.jpg"><div class="pin"></div><div class="pulse"></div>',
  iconSize: [30, 30],
  //iconAnchor: [18, 30]
  iconAnchor: [10, 33]
});

L.marker([51.5, -0.09], {
  icon: myIcon
}).addTo(map);
...