Question

以下html脚本按计划绘制指定的地图图块和标记。但是，标记的大小是相同的。如何在列表＆＃39;中列出第3项和第4项中指定大小的标记？这样我可以根据某些属性区分不同的标记。

<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<link 
    rel="stylesheet" 
    href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
/>
</head>
<body>

<div id="map" style="width: 600px; height: 400px"></div>

<script
    src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
</script>

<script>

var planes = [
    ["7C6B07",-40.99497,174.50808, 5, 5],
    ["7C6B38",-41.30269,173.63696, 10, 10],
    ["7C6CA1",-41.49413,173.5421, 15, 5],
    ["7C6CA2",-40.98585,174.50659, 15, 15],
    ["C81D9D",-40.93163,173.81726, 20, 5],
    ["C82009",-41.5183,174.78081, 20, 10],
    ["C82081",-41.42079,173.5783, 5, 15],
    ["C820AB",-42.08414,173.96632, 5, 9],
    ["C820B6",-41.51285,173.53274, 7, 12]
    ];

    var map = L.map('map').setView([-41.3058, 174.82082], 8);
    mapLink = 
        '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; ' + mapLink + ' Contributors',
        maxZoom: 18,
        }).addTo(map);

    for (var i = 0; i < planes.length; i++) {
        marker = new L.marker([planes[i][1],planes[i][2]], {iconSize: [planes[i][3], planes[i][4]]})
            .bindPopup(planes[i][0])
            .addTo(map);
    }

</script>
</body>
</html>

Answer 1

Leaflet似乎不允许用户修改默认标记的大小。但是，您可以创建自己的自定义ICON并扩展常规标记类，修改其大小和其他属性。

请查看此处的文档：

http://leafletjs.com/reference.html#icon

Answer 2

您将iconSize指定为标记对象的选项。这不是合适的方式。

实际上，您需要创建一个icon对象，在那里设置iconSize值，然后在icon对象的选项中使用此map对象。

以下是代码段

for (var i = 0; i < planes.length; i++) {

    //create an icon object for each marker
    var myIcon = L.icon({
        iconUrl: 'http://leafletjs.com/dist/images/marker-icon.png',
        iconSize: [planes[i][3], planes[i][4]] //set icon size here
    });

    marker = new L.marker([planes[i][1],planes[i][2]], {icon: myIcon})// use the above icon object here
        .bindPopup(planes[i][0])
        .addTo(map);
}

尽管图标看起来并不好看。这是工作fiddle

如何绘制不同大小的标记

2 个答案: