使用 leafletsjs 打开 bootstrap 模式

Question

我正在使用地图和 leafletjs，在地图中我有一些标记，当用户单击标记时，bootstrap 模式应该会显示一个 highcharts 图表。像这样的东西：http://leafletjs.com/examples/custom-icons-example.html 但有模态。我怎样才能做到这一点？

如果用angularjs就更好了

我做了一个快速的 fiddle http://jsfiddle.net/kLLcetev/

这是打开模式的代码：

  function markerFunction(){
        for (var i in markers){
            var markerID = markers[i].options.title;

                markers[i].openPopup();

        $("#Modal").modal("show"); 
        $("#Modal").modal("open");
        $("#Modal").modal();
        }
    }

Answer 1

我认为观看点击事件，然后按需创建模式 html 会起作用，如下所示。

var markerGroup = L.featureGroup;
markerGroup.addTo(map)
//For each marker, .addTo(markerGroup)
markerGroup.on('click', function (event) {
    var modalDiv = "<div class='modal fade'.... [(docs)][1]
    $(modalDiv).modal({})
})

Answer 2

可以在开头设置模态框，不显示使用

$("#Modal").modal({show:false});

然后绑定到每个标记的点击事件，并在调用的函数中显示模态。

for (var i in markers){
    var markerID = markers[i].options.title;
    markers[i].openPopup();
    markers[i].on('click', function() {
        $("#Modal").modal("show"); 
    });
}

现场示例：http://jsfiddle.net/0x7v8gkd/

Answer 3

如果您想使用 Angular 执行此操作，UI-Bootstrap 是一个很好的选择：

Bootstrap components written in pure AngularJS by the AngularUI Team

https://angular-ui.github.io/bootstrap/

将 ui-bootstrap 模块注入您的应用，并将 $uibModal 服务注入您的控制器：

angular.module('app', [
    'ui.bootstrap'
])

angular.module('app').controller('leaflet', [
             '$uibModal',
    function ($uibModal) {

    }
])

在 Leaflet 单击事件中打开模式：

new L.Marker([n, n]).on('click', function () {
    $uibModal.open({
        template: '<div highchart></div>',
    })
})

一个简单的 Highcharts 指令：

angular.module('app').directive('highchart', [
    function () {
        return {
            link: function (scope, element, attributes) {
                $(element[0]).highcharts(...)
            }
        }
    }
])

这是 Plunker 上的演示：http://embed.plnkr.co/ZiHMFC/preview

使用 leafletsjs 打开 bootstrap 模式

Opening a bootstrap modal with leafletsjs

jquery

leaflet

bootstrap-modal