Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Как вставить карту в JQuery Modile?

 PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Doox911
Отправлено: 18 Января, 2014 - 19:56:52
Post Id



Частый гость


Покинул форум
Сообщений всего: 166
Дата рег-ции: Сент. 2011  


Помог: 0 раз(а)




CODE (html):
скопировать код в буфер обмена
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4.         <head>
  5.    
  6.         <title></title>
  7.   <meta charset="utf-8" />
  8.  
  9.   <!-- Необходимо для того, чтобы страница отображалась в 100% масштабе.-->
  10.   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  11.  
  12.   <!-- Подключаем различный таблицы стилей. Выбор подключаемой таблицы зависит от расширерения экрана. -->
  13.   <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 800px)" href="kub_pc.css" />
  14.   <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 799px)" href="kub_mobile.css" />
  15.  
  16.   <!-- Подключаем JQuery, JQuery Mobile и JQuery Mobile CSS -->
  17.   <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  18.   <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
  19.  
  20.   <link rel="stylesheet" href="css/themes/mJQuery.css" />
  21.   <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
  22.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
  23.  
  24.   <!-- Подключаем leaflet JS и leaflet CSS, для отображения карты -->
  25.   <script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
  26.   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
  27.  
  28.  </head>
  29. <body>
  30.   <div data-role="page">
  31.  
  32.    <!-- header -->
  33.    <div data-role="header">
  34.          </div>
  35.    <!-- /header -->
  36.  
  37.    <!-- content -->
  38.    <div data-role="content">
  39.  <div id="map">
  40.  <style>
  41. #map{
  42.  width: 100%;
  43.  height: 100%;
  44.     position:relative;
  45.     top:0px;
  46. }
  47. #adm_hatun{
  48.  margin:0;
  49.  padding:0;
  50.  width: 300px;
  51.  height: 100px;    
  52. }
  53. #adm_hatun i{
  54.  font: 10px Arial;
  55. }
  56. #church{}
  57. #school{}
  58. #circle{}
  59.  
  60.  </style>  
  61.  <script>
  62.   var  MAP = new L.map('map',
  63.   {
  64.    center: [55.00568744289998,37.83303327379225],
  65.    zoom: 13,
  66.    zoomControl: false,
  67.    attributionControl: false,
  68.    scrollWheelZoom: false  
  69.   });// Создали объект карта с параметрами
  70.   var OSMLayer = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
  71.    {
  72.     attribution:''
  73.    }
  74.   ); // Создали объект слоя OSM      
  75.   var adm_hatun = new L.marker([55.00568744289998,37.83303327379225]).addTo(MAP);
  76.   var church = new L.marker([55.00629042601082,37.83461041269301]).addTo(MAP);
  77.   var school = new L.marker([55.00896067082531,37.83561892328261]).addTo(MAP);
  78.   var circle = L.circle([55.002115505025856,37.83243245897292], 50, {
  79.     color: 'red',
  80.     fillColor: '#f03',
  81.     fillOpacity: 0.5
  82. }).addTo(MAP);
  83.   adm_hatun.bindPopup('<div id="adm_hatun"><table><tr><td><i>Администрация - Сельское поселение Семёновское</i></td><td></td></tr></table></div>');
  84.   church.bindPopup('<div id="adm_hatun"><table><tr><td><i>Церковь Рождества Пресвятой Богородицы</i></td><td><img src="cherch.jpeg" /></td></tr></table></div>');
  85.   school.bindPopup("Школа");
  86.   circle.bindPopup("Торговая площадь");
  87.  
  88.            
  89.   var zoom = L.control.zoom({
  90.       position: 'topright',
  91.       zoomInText: '+',
  92.       zoomOutText: '-',
  93.       zoomInTitle: 'Увеличить',
  94.       zoomOutTitle: 'Уменьшить'
  95.   }).addTo(MAP);
  96.   var scale = L.control.scale({
  97.    position: 'bottomleft',
  98.    metric: true,
  99.    imperial: false
  100.   }).addTo(MAP);
  101.   MAP.addLayer(OSMLayer);
  102.    
  103.  </script>
  104.  </div>    
  105.          </div>
  106.    <!-- /content -->
  107.    
  108.    <!-- footer -->
  109.          <div data-role="footer">
  110.           <h4>Page Footer</h4>
  111.          </div>
  112.    <!-- /footer -->
  113.   </div>
  114.   <!-- /page -->
  115.  </body>
  116. </html>
  117.  
  118.  


Доброго времени суток.

В без данного API всё отображается. А с ней не хочет. Почему?
 
 Top
Doox911
Отправлено: 19 Января, 2014 - 10:44:37
Post Id



Частый гость


Покинул форум
Сообщений всего: 166
Дата рег-ции: Сент. 2011  


Помог: 0 раз(а)




Разбираясь Я обнаружил:

1. Необходимо было изменить это:
CODE (text):
скопировать код в буфер обмена
  1. <div data-role="content">
  2.  

На это:
CODE (text):
скопировать код в буфер обмена
  1. <div data-role="content" id="content">
  2.  

И задать ему ширину и высоту. Но теперь, Я столкнулся с другой проблемой. Библиотека JQuery Mobile влияет на отображение карты. Но это пол беды. Мне интересно другое. Карта становится видимой, только после изменения видимой области? Почему?
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB