用leaflets打開bootstrap模式

我在地圖中使用地圖和leafletjs，我有幾個標記，當用戶單擊標記時，bootstrap模式應該顯示一張highcharts圖表。這樣的事情：http://leafletjs.com/examples/custom-icons-example.html但與模式。我怎麼能做到這一點？用leaflets打開bootstrap模式

如果使用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(); 
     } 
    }

來源

2015-10-23 B.J. A.A.

您是否嘗試過在標記的單擊事件中打開模式？ – gusper

@gusper see fiddle –

如果你想做到這一點角度，UI的引導是一個非常不錯的選擇：由AngularUI隊用純AngularJS

引導組件

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

注入ui-bootstrap模塊到你的應用程序和$uibModal服務到您的控制器：

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

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

    } 
])

打開模式在單張單擊事件：

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

來源

2015-10-26 22:28:04 iH8

我認爲觀看click事件，然後在需要時創建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({}) 
})

來源

2015-10-25 14:29:51 snkashis

您可以設置在一開始的模式，而不是通過使用

$("#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/

來源

2015-10-26 18:03:47 Marcelo

當然，還有其他的方法來構建代碼，但是這保留了大部分現有的代碼。 – Marcelo

當標記數量在100附近時它會很有效率嗎？ –

用leaflets打開bootstrap模式

回答

相關問題