Удаление метки с яндекс карты
HTML
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="YMapsID"></div>
CSS
html, body, #YMapsID {
height: 100%;
}
body {
margin: 0;
}
#YMapsID {
width: 100%;
}
.item h3 {
font-size: 20px;
text-align: center;
}
.item p {
font-size: 14px;
}
.item button {
width: 100%;
border: none;
background: #E83B2E;
color: #fff;
padding: 5px 0;
cursor: pointer;
text-transform: uppercase;
}
JavaScript
var map,
myCollection;
ymaps.ready(function () {
map = new ymaps.Map('YMapsID', {
center: [40.43879453, 18.01746949],
zoom: 12,
type: 'yandex#map',
behaviors: ['drag', 'multiTouch']
});
myCollection = new ymaps.GeoObjectCollection();
do_search();
});
function removeFromServer(id) {
alert(id);
}
function do_search() {
// считаем, что данные уже пришли с сервера
var json = [{
id: 1,
lon: 40.43879453,
lat: 18.01746949,
SubCDesignName: 'Метка 1',
title: 'Точка',
description: 'Я всплыла',
img: 'http://fromaustralia.ru/images/Priroda/relief-AustraliaM.jpg'
}, {
id: 2,
lon: 40.40879453,
lat: 18.00746949,
SubCDesignName: 'Метка 2',
title: 'А я вторая точка',
description: 'На меня тоже нажали',
img: 'http://fotovsem.com/wp-content/uploads/2015/08/%D0%BF%D1%80%D0%B8%D1%80%D0%BE%D0%B4%D0%B0_%D0%BE%D0%B1%D0%BE%D1%87%D0%B8%D0%BD%D1%8B_%D1%82%D1%80%D0%B0%D0%B2%D0%B0_%D0%B7%D0%B5%D0%BB%D0%B5%D0%BD%D1%8C_%D0%BC%D0%BE%D1%81%D1%821.jpg'
}];
myCollection.removeAll();
for (i = 0; i < json.length; i++) {
buildPlacemark(json[i]);
}
function buildPlacemark(point) {
var layout = ymaps.templateLayoutFactory.createClass(
'<div class="item">' +
'<h3>{{properties.title}}</h3>' +
'<img src="{{properties.img}}">'+
'<p>{{properties.description}}</p>' +
'<button id="remove-placemark">{{properties.buttonText}}</button>' +
'</div>', {
build: function () {
layout.superclass.build.call(this);
document.getElementById('remove-placemark').addEventListener('click', this.onRemove);
},
clear: function () {
...