Leaflet: легче выбрать маркеры круга - PullRequest
Новая
       19

Leaflet: легче выбрать маркеры круга

0 голосов
/ 08 ноября 2019

Я работаю с картой Leaflet, которая отображает несколько круговых маркеров при загрузке страницы. Но пользователям было немного сложно нажимать / касаться маркеров круга на мобильных телефонах и iPad. Есть ли способ увеличить выделенную область для этих маркеров круга?

1 Ответ

0 голосов
/ 08 ноября 2019

Этот исполняемый код демонстрирует использование SVG для создания значка маркера, который может быть вашим решением: 

var clatlng = [15, 100];
var zoom = 8;
var mymap = L.map("mapid").setView(clatlng, zoom);

//This map tiles is simple and no hassles.
L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: "Map data © OpenStreetMap contributors"
}).addTo(mymap);

const svg_O =
  '<svg width="100" height="100" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" stroke="none" opacity="0.35" fill="yellow"/><circle cx="50" cy="50" r="15" stroke="blue" fill="green"/></svg>';
const svgpin_O = encodeURI("data:image/svg+xml;utf-8," + svg_O);
const icon_O = L.icon({
  iconUrl: svgpin_O,
  iconSize: [100, 100],
  iconAnchor: [50, 50]
});

var marker1 = L.marker(clatlng, {
  icon: icon_O,
  draggable: true,
  autoPan: true
}).addTo(mymap);

const svg_pin =
  '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" fill="firebrick"></path></svg>';

const svgpin_Url = encodeURI("data:image/svg+xml;utf-8," + svg_pin);

const svgpin_Icon = L.icon({
  iconUrl: svgpin_Url,
  iconSize: [24, 24],
  iconAnchor: [12, 24],
  popupAnchor: [0, -22]
});

var marker2 = L.marker(clatlng, {
  icon: svgpin_Icon,
  draggable: true,
  autoPan: true
}).addTo(mymap);
#mapid { 
  height: 200px; 
}
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
		integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
		crossorigin="" />
	<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
		integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
		crossorigin=""></script>

<div id="mapid"></div>
...