传单:易于选择圆形标记

问题描述 投票:0回答:1

我使用的传单地图在页面加载时显示多个圆形标记。但是用户发现很难在手机和Ipad上单击/触摸圆圈标记。有没有办法增加这些圆形标记的选择“区域”?

geometry leaflet click
1个回答
0
投票

此可运行代码演示了如何使用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: 480px; 
}
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
		integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
		crossorigin="" />
	<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
		integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
		crossorigin=""></script>

<div id="mapid"></div>
© www.soinside.com 2019 - 2024. All rights reserved.