.bindpopup函数无法在地图上显示大量的点(Leaflet)

时间:2015-02-25 12:18:52

标签: mongodb popup leaflet openstreetmap

我正在尝试使用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);
                        ";
                    }

                }
            }

如果我删除/评论上面的弹出部分,我得到地图上显示的所有点,当使用.bindpopup函数时,当有大量要显示的点(可能超过100)时会出现问题/ p>

是否有解决方案可以解决这一特定问题?

感谢您的帮助

1 个答案:

答案 0 :(得分:0)

首先确保问题不在PHP脚本中,确保error_reportingdisplay_errors已开启,请参阅:

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

如果没有问题,那么您会发现问题不在标记数量中,您可以通过将静态文本设置为弹出内容来轻松测试:< / p>

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?

Offtopic tip:

如果除了设置内容之外什么都不做,你不需要创建一个单独的弹出窗口,你可以在标记对象上使用bindPopup它就可以了那对你来说:

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

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