Jquery Ajax 出现 Leaflet 和 MarkerCluster 错误

Question

我有一个应用程序，我在其中通过循环访问数据集来动态加载标记。

for (var i = 0; i < data.length; i++) {
                var plateNo = data[i].PLATE_NUMBER;
                var permitNo = data[i].PERMITINFOID;
                var popup = '<h5>EPS</h5>' + 'Plate:' + plateNo + '<br/>' +
                    ' Permit: <a class=\'link\'  href=' + url + '>' + permitNo + '</a>' + 
                    '<p style=\"color:blue\">' + '' + '<a class=\'link\'  href=' + url + '>' + 
                    'Import' + '</a>' + '<br/>' + '<a class=\'link\'  href=' + url + '>' + 
                    'Duplicate' + '</a>' + '<br/>' + '<a class=\'link\'  href=' + url + '>' + 
                    'Removed' + '</a>' + '<br/>' + '</p>';

                var m = L.marker([data[i].REF_LATITUDE, data[i].REF_LONGITUDE], { icon: epsiconR, draggable: 'true' })
                                    .bindPopup(popup);
                markerClusters.addLayer(m);

                }
                map.addLayer(markerClusters);
            map.invalidateSize(false);

我将事件处理程序附加到具有 class 'link' 的每个项目，如下所示：

  map.on('popupopen', function () {
            $('.link').click(function (e) {
                createDialog();
            });
        });

我正在 ajax 像这样在 createDialog 方法中加载不同的页面：

 function createDialog() {
             $("#testPara").slideToggle("slow");
        $.ajax({
            dataType: 'html',
            url: '/home/UpdateInventory',
            success: function (data) {
                $('#testPara').html(data);
            }
        });

}

标记很好地聚集在一起，点击弹出窗口 ajax 加载 div 就好了。但是，一旦 Ajax 加载完成，如果我尝试放大或缩小地图或四处拖动地图，我会收到错误消息 Cannot read 属性 'lat' of undefined

之后地图就冻结了。我已经坚持了一整天，非常感谢任何帮助或意见。

这 fiddle 显示了问题，当您单击 link 时控制台显示错误

http://jsfiddle.net/pk9vbvs4/

谢谢

Answer 1

在我看来，您正在尝试加载一个页面，该页面的脚本与当前页面脚本（可能还有文档 ID）冲突。至少在您的 jsFiddle 中，您尝试加载完全相同的页面（使用 url: '/'），这会破坏所有 JavaScript.

所有脚本都加载了两次，初始化代码在未重新初始化的变量上再次运行，所以奇怪的事情发生了。

在没有任何脚本的情况下加载内容的演示：http://jsfiddle.net/pk9vbvs4/1/一切仍然运行很好。

由于我们没有关于目标页面的任何详细信息，因此我无法确定这是您问题的根本原因。

Jquery Ajax 出现 Leaflet 和 MarkerCluster 错误

Jquery Ajax with Leaflet and MarkerCluster Errors out

jquery

leaflet

markerclusterer