小册子地图：使多边形可点击

我设法用leaflet.js创建地图& jQuery mobile。现在我需要摆脱jQuery手机，而只是使用jQuery。小册子地图：使多边形可点击

一切正常，但我不能点击我在地图上绘制的多边形了。它曾与jQuery手机合作过。

任何提示？

这里是我的简化代码：

var map = L.map('map', { 
     zoomControl: false 
    }); 
    L.tileLayer('http://{s}.tile.cloudmade.com/**apikey***/997/256/{z}/{x}/{y}.png', { 
     attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="http://cloudmade.com">CloudMade</a>', 
     maxZoom: 18 
    }).addTo(map);

对于多边形：

var geojsonFeature = { "type": "Polygon","coordinates": value.polygon};        
var polycolor = getGebColor(value.geb_nr);       
var geojsonStyle = {"color": polycolor};        
polygons[i] = L.geoJson(geojsonFeature, {style: geojsonStyle}).addTo(map); 

// make clickable 
polygons[i].on('click', function(e) { 
     if (lastMarker) { 
     map.removeLayer(lastMarker); 
    } 
    var url = "http://*****/tugetherMap.php?callback=&id="+value.id+"&type=B"; 
    markers[i] = L.marker([value.point[1], value.point[0]]).addTo(map); 
    gebName = value.nameLang;          

    markers[i].bindPopup("<a class='gebOnMap' href='gebaeude.html' >"+gebName+"</a>").openPopup(); 
    lastMarker = markers[i];        
    });

的多边形[I]。对（ '点击'，...）是其中一部分不再工作了。它适用于map.on（“点击”，...）

来源

2014-03-06 lornz

在将多边形添加到地图之前，您是否尝试添加点击功能？ – apohl

没有。但我只是尝试了一下，它给了我一个错误，因为多边形在那个时候没有定义。 – lornz

你可以分割它，所以你定义多边形，添加点击功能，然后将其添加到地图。 'polygons [i] = L.geoJson（geojsonFeature，{style：geojsonStyle}）;' '多边形[I]。对（' 点击 '功能（E）{};' '多边形[I] .addTo（地图）;” – apohl

有一个问题与此并用以下

function onEachFeature(feature, layer) { 
    // Do all your popups and other binding in here 
    // does this feature have a property named popupContent? 
    if (feature.properties && feature.properties.popupContent) { 
     layer.bindPopup(feature.properties.popupContent); 
    } 
} 

var geojsonFeature = { 
"type": "Feature", 
"properties": { 
    "name": "Coors Field", 
    "amenity": "Baseball Stadium", 
    "popupContent": "This is where the Rockies play!" 
}, 
"geometry": { 
    "type": "Point", 
    "coordinates": [-104.99404, 39.75621] 
} 
}; 

L.geoJson(geojsonFeature, { 
    onEachFeature: onEachFeature 
}).addTo(map);

在你的代码，我想解决它，它会

polygons[i] = L.geoJson(geojsonFeature, {onEachFeature: onEachFeature, 
             style: geojsonStyle}).addTo(map); 



function onEachFeature(feature, layer) { 
    // Some jazz and magic you need to do with your layer and feature objects 
}

来源

2014-03-07 00:41:11

感谢您的提示我已经尝试过，我认为这是创建弹出式对象的清洁解决方案不幸的是，它并没有帮助我的案例 – lornz

这个功能的全部目的是做这一项工作，让她感到羞耻她让你失望，我会说这是最好的方法为什么没有为你工作有没有控制台错误？ –

没有错误。没有任何反应。这是问题。我没有反应点击多边形 – lornz

您需要将每个多边形绑定到单击事件处理程序，如下所示。

L.geoJson(geojsonFeature, { 
    onEachFeature: function(feature, layer) { 
     layer.on('click', function(e) { 
      // Do whatever you want here, when the polygon is clicked. 
     }); 
    } 
}).addTo(map);

来源

2014-07-15 19:39:29

我的解决方案是将Leaflet降级到0.7.3或升级到1.0-beta2（撰写本文时的最新版本）。

来源

2016-01-27 16:16:50 johanlahti

小册子地图：使多边形可点击

回答

相关问题