Question

我使用地图和leafletjs，在地图中我有几个标记，当用户点击标记时，引导模式应该显示高图表图表。这样的事情：http://leafletjs.com/examples/custom-icons-example.html但是有一个模态。我怎么能做到这一点？

如果使用angularjs会更好。

我做了一个快速的小提琴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 data = google.visualization.arrayToDataTable(<?php echo($json) ?>);

Answer 2

您可以在开头设置模态，而不是使用

显示模式

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

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

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是一个非常好的选择：

AngularUI团队用纯AngularJS编写的Bootstrap组件

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模式

3 个答案: