.bindpopup 函数不适用于在地图上显示大量点（传单）

Question

我正在尝试使用 bindpopup 函数在地图上显示超过 100 个点，但该函数没有按预期工作。在地图上添加点时没有任何错误，但是在添加 .bindpopup 函数时，没有渲染地图，空白屏幕。下面的代码是当我循环到一个数组中以检索要显示的坐标及其放置在弹出窗口中的相应信息时。

for($i=0;$i<sizeof($result);$i++){
                if(!empty($result[$i])){
                    foreach($result[$i] as $r){
                        $info = "";
                        foreach($r->info as $eachInfo){
                            $info .= $eachInfo . "<br/>";
                        };
                        echo "
                        var mark = L.marker([" . $r->coordinates[0]->longitude . "," . $r->coordinates[0]->latitude . "]);
                        var popup = L.popup().setContent('".$info."');
                        mark.addTo(map);
                        mark.bindPopup(popup);
                        ";
                    }

                }
            }

如果我remove/comment上面的弹出部分，我得到了地图上显示的所有点，当有大量点要显示时（可能超过100个）在使用时出现问题.bindpopup 函数

是否有解决此特定问题的解决方案？

感谢您的帮助

Answer 1

首先确保 error_reporting 和 display_errors 已打开，确保问题不在您的 PHP 脚本中，请参阅：

http://php.net/manual/en/function.error-reporting.php http://php.net/manual/en/errorfunc.configuration.php#ini.display-errors

如果没有问题，那么你就会发现问题不在于标记的数量，你可以通过将静态文本设置为弹出内容来轻松测试：

var popup = L.popup().setContent('Test one two!');

你会发现它有效。您会发现在一个（或多个）$info 条目中的某处有一个单引号 '；这将使您的输出 javascript 像这样：

var popup = L.popup().setContent('OMG here's an error!');

那会非常失败。这里的解决方案是转义 $info 字符串中的所有单引号。你如何做到这一点取决于 $info 条目的内容，但是在 SO 上找到的内容绰绰有余，例如：

How to escape only single quotes?

题外话提示：

如果你除了设置它的内容什么都不做，你不需要创建一个单独的弹出窗口，你可以只在标记对象上使用 bindPopup，它会为你做：

var mark = L.marker([" . $r->coordinates[0]->longitude . "," . $r->coordinates[0]->latitude . "])
    .bindPopup('".$info."')
    .addTo(map);

参考：http://leafletjs.com/reference.html#marker-bindpopup

.bindpopup 函数不适用于在地图上显示大量点（传单）

.bindpopup function is not working for displaying a large amount of points onto a map (Leaflet)

popup

mongodb

openstreetmap

leaflet