Question

我正在尝试在jQuery UI对话框中显示传单地图，但在以下情况下存在冲突：

 $( "#dialog-assigned-route" ).dialog...

在文档就绪时运行。我尝试使用style ='display：none'隐藏div'dialog-assigned-route'，然后在click事件中移动$（“＃dialog-assigned-route”）.dialog ....这样做会在对话框中显示传单地图，但对话框无法正常显示。

有人可以提供使用Leaflet和jQuery UI Dialog的解决方案吗？

<div id="dialog-assigned-route" title="Assigned Route">
<div id="dialog-assigned-route-list-items-area">
<ol class="selectable">
  <li class="ui-widget-content">M60</li>
  <li class="ui-widget-content">SBS15</li>
</ol>
<div id="routeFilterMap"></div> 
<script>
//filter by route map
var routeFilterMap = L.map('routeFilterMap').setView([40.732139, -73.986434], 11);
L.tileLayer('http://{s}.tile.cloudmade.com/d4fc77ea4a63471cab2423e66626cbb6/997/256/{z}/{x}/{y}.png', {
    attribution: false,
    maxZoom: 18
}).addTo(routeFilterMap);
</script>
    <button>Apply selected filters</button>
</div>
<div id="dialog-assigned-route-image-info-area">
<div id="route-map"></div> 
 <!--insert map-->
</div>
</div>

$(function() { 
  $( "#dialog-assigned-route" ).dialog({
      autoOpen: false,
      modal: true,
      width: 850,
      resizable: true
  });

  $( "#button-assigned-route" ).click(function() {
      $( "#dialog-assigned-route" ).dialog( "open" );   
  });  
});

我解决了！

<div id="dialog-assigned-route" title="Assigned Route">
<div id="dialog-assigned-route-list-items-area">
<ol class="selectable">
  <li class="ui-widget-content">M60</li>
  <li class="ui-widget-content">SBS15</li>
  <li class="ui-widget-content">M15</li>
  <li class="ui-widget-content">M31</li>
</ol>
<div id="routeFilterMap"></div> 
    <button>Apply selected filters</button>
</div>
<div id="dialog-assigned-route-image-info-area">
<div id="route-map"></div> 
 <!--insert map-->
</div>
</div>


 $( "#dialog-assigned-route" ).dialog({
      autoOpen: false,
      modal: true,
      width: 850,
      resizable: true,
      open: function(){
//filter by route map
var routeFilterMap = L.map('routeFilterMap').setView([40.732139, -73.986434], 11);
L.tileLayer('http://{s}.tile.cloudmade.com/d4fc77ea4a63471cab2423e66626cbb6/997/256/{z}/{x}/{y}.png', {
      attribution: false,
      maxZoom: 18
}).addTo(routeFilterMap);
  }
});

jQuery UI对话框和Leaflet

0 个答案: