如何使用Leaflet集群插件

时间:2013-11-19 07:26:18

标签: javascript asp.net leaflet markers markerclusterer

我从传单Girhub下载了dist dir 在IIS上创建了一个站点,以便我可以引用它,但我甚至无法按照演示页面上的示例进行操作。

我正在使用asp.net构建我的网站,并在我的ASPX页面中包含以下内容:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<link rel="stylesheet" href="localhost/leaflet.label.css" />
<link rel="stylesheet" href="localhost/MarkerClusters/dist/MarkerCluster.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="localhost/MarkerClusters/dist/leaflet.markercluster-src.js"></script>

<script type="text/javascript">

        var map = L.map('map',
                            {
                               crs: L.CRS.EPSG4326,
                                maxBounds: new L.LatLngBounds([-312, -180], [180, 312])
                            }).setView([0, 0], 0);

         var myIcon = L.icon({
                       iconUrl: 'http://localhost/CustomIcons/Blue.png',
                       iconSize: [20, 20],
                       shadowSize: [50, 64],
                       iconAnchor: [10, 10],
                       shadowAnchor: [4, 62],
                       popupAnchor: [0, 0]             });

然后这是我无法得到的部分:

         var myMarkerCluster = L.markerClusterGroup({maxClusterRadius: 120});

        //try to add markers
        var testmarker1 = L.marker(new L.LatLng(0, 0), { icon: myIcon, draggable: false });
        var testmarker2 = L.marker(new L.LatLng(10, 10), { icon: myIcon, draggable: false });

        myMarkerCluster.addLayer(testmarker1);
        myMarkerCluster.addLayer(testmarker2);

        map.addLayer(myMarkerCluster);

现在,我注意到的奇怪之处在于,在我为群集添加代码之前,我能够右键单击地图并使用lat,lon弹出一个传单。我没有在代码中删除该功能,但现在,添加了集群代码,如果我右键单击,那么我将获得常规浏览器上下文菜单。我不明白发生了什么,并想知道我正在努力完成的标记聚类中缺少什么。请指教....

1 个答案:

答案 0 :(得分:0)

不要认为默认情况下有一个,你需要向传单添加上下文菜单,试试这个

http://leafletjs.com/plugins.html

https://github.com/aratcliffe/Leaflet.contextmenu