CODE (html):
скопировать код в буфер обмена
скопировать код в буфер обмена
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <meta charset="utf-8" />
- <!-- Необходимо для того, чтобы страница отображалась в 100% масштабе.-->
- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
- <!-- Подключаем различный таблицы стилей. Выбор подключаемой таблицы зависит от расширерения экрана. -->
- <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 800px)" href="kub_pc.css" />
- <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 799px)" href="kub_mobile.css" />
- <!-- Подключаем JQuery, JQuery Mobile и JQuery Mobile CSS -->
- <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
- <link rel="stylesheet" href="css/themes/mJQuery.css" />
- <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
- <!-- Подключаем leaflet JS и leaflet CSS, для отображения карты -->
- <script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
- </head>
- <body>
- <div data-role="page">
- <!-- header -->
- <div data-role="header">
- </div>
- <!-- /header -->
- <!-- content -->
- <div data-role="content">
- <div id="map">
- <style>
- #map{
- width: 100%;
- height: 100%;
- position:relative;
- top:0px;
- }
- #adm_hatun{
- margin:0;
- padding:0;
- width: 300px;
- height: 100px;
- }
- #adm_hatun i{
- font: 10px Arial;
- }
- #church{}
- #school{}
- #circle{}
- </style>
- <script>
- var MAP = new L.map('map',
- {
- center: [55.00568744289998,37.83303327379225],
- zoom: 13,
- zoomControl: false,
- attributionControl: false,
- scrollWheelZoom: false
- });// Создали объект карта с параметрами
- var OSMLayer = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
- {
- attribution:''
- }
- ); // Создали объект слоя OSM
- var adm_hatun = new L.marker([55.00568744289998,37.83303327379225]).addTo(MAP);
- var church = new L.marker([55.00629042601082,37.83461041269301]).addTo(MAP);
- var school = new L.marker([55.00896067082531,37.83561892328261]).addTo(MAP);
- var circle = L.circle([55.002115505025856,37.83243245897292], 50, {
- color: 'red',
- fillColor: '#f03',
- fillOpacity: 0.5
- }).addTo(MAP);
- adm_hatun.bindPopup('<div id="adm_hatun"><table><tr><td><i>Администрация - Сельское поселение Семёновское</i></td><td></td></tr></table></div>');
- church.bindPopup('<div id="adm_hatun"><table><tr><td><i>Церковь Рождества Пресвятой Богородицы</i></td><td><img src="cherch.jpeg" /></td></tr></table></div>');
- school.bindPopup("Школа");
- circle.bindPopup("Торговая площадь");
- var zoom = L.control.zoom({
- position: 'topright',
- zoomInText: '+',
- zoomOutText: '-',
- zoomInTitle: 'Увеличить',
- zoomOutTitle: 'Уменьшить'
- }).addTo(MAP);
- var scale = L.control.scale({
- position: 'bottomleft',
- metric: true,
- imperial: false
- }).addTo(MAP);
- MAP.addLayer(OSMLayer);
- </script>
- </div>
- </div>
- <!-- /content -->
- <!-- footer -->
- <div data-role="footer">
- <h4>Page Footer</h4>
- </div>
- <!-- /footer -->
- </div>
- <!-- /page -->
- </body>
- </html>