如何使用自定义标记与传单?

时间:2014-02-05 17:56:22

标签: leaflet mapbox tilemill

我在google doc上从共享CSV中提取标记数据。我可以在传单中将它们映射好。我想使用自己的PNG标记。我还想按数据类别分配不同的标记(如果'employees'field =< 10则使用employee10.png)

1 个答案:

答案 0 :(得分:0)

在文档页面上有一个带有自定义图标的标记的示例:http://leafletjs.com/examples/custom-icons.html

var greenIcon = L.icon({
    iconUrl: 'leaf-green.png',
    shadowUrl: 'leaf-shadow.png',

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

定义所有图标,然后在创建标记时使用它们。例如,

var employeesLowIcon = L.icon({ ... });
var employeesHighIcon = L.icon({ ... });
var markerIcon = employees < 10 ? employeesLowIcon : employeesHighIcon;
L.marker([51.5, -0.09], {icon: markerIcon }).addTo(map);