7 февраля 2020
Нет комментариев
.htacess:
Header set Access-Control-Allow-Origin *
или php:
header('Access-Control-Allow-Origin: *');
.htacess:
Header set Access-Control-Allow-Origin *
или php:
header('Access-Control-Allow-Origin: *');
в .htaccess
Header always append X-Frame-Options DENY
RewriteCond %{HTTP_HOST} ^site.ru RewriteRule ^spb/(.*)$ http://spb.site.ru/$1 [L,R=301]
Файлы для загрузки:
https://leafletjs.com/download.html https://github.com/Leaflet/Leaflet.markercluster
Подключение:
<script src="/assets/js/leaflet/leaflet.js"></script> <script src="/assets/js/leaflet/leaflet.markercluster.js"></script> <link href="/assets/js/leaflet/leaflet.css" rel="stylesheet" type="text/css"/> <link href="/assets/js/leaflet/MarkerCluster.css" rel="stylesheet" type="text/css"/> <link href="/assets/js/leaflet/MarkerCluster.Default.css" rel="stylesheet" type="text/css"/>
JS:
var map=L.map('map_search_leaflet').setView([59.939095,30.315868],2); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',{ attribution:'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', minZoom:2, maxZoom:18, id:'mapbox.streets', accessToken:'--token--' }).addTo(map); map.scrollWheelZoom.disable(); map.setMaxBounds([ [90,-180], [-90,180] ]); var markers=L.markerClusterGroup({ maxClusterRadius:20 }); markers.addLayer(L.marker([60.171801, 24.956500]).bindPopup('<div class="popup_header"><a href="http://example.com/nedvizhimost/kupit/kafe-v-helsinki-art1.html">Кафе в Хельсинки</a></div><div class="popup_body"><div class="art">ID: art1</div><div class="price">248 000 €</div><div class="photo"><a href="http://example.com/nedvizhimost/kupit/kafe-v-helsinki-art1.html"><img src="http://example.com/resize/catalog/crop/270/210/c11.jpg" alt="Кафе в Хельсинки"/></a></div></div><div class="popup_footer"><div class="f_3">49 м2</div></div>')); markers.addLayer(L.marker([60.166892, 24.943673]).bindPopup('<div class="popup_header"><a href="http://example.com/nedvizhimost/kupit/restoran-v-helsinki-art2.html">Ресторан в Хельсинки</a></div><div class="popup_body"><div class="art">ID: art2</div><div class="price">350 000 €</div><div class="photo"><a href="http://example.com/nedvizhimost/kupit/restoran-v-helsinki-art2.html"><img src="http://example.com/resize/catalog/crop/270/210/c18.jpg" alt="Ресторан в Хельсинки"/></a></div></div><div class="popup_footer"><div class="f_3">130 м2</div></div>')); markers.addLayer(L.marker([60.166892, 24.943673]).bindPopup('<div class="popup_header"><a href="http://example.com/nedvizhimost/kupit/pomeshchenie-v-helsinki-art3.html">Помещение в Хельсинки</a></div><div class="popup_body"><div class="art">ID: art3</div><div class="price">198 000 €</div><div class="photo"><a href="http://example.com/nedvizhimost/kupit/pomeshchenie-v-helsinki-art3.html"><img src="http://example.com/resize/catalog/crop/270/210/c22.jpg" alt="Помещение в Хельсинки"/></a></div></div><div class="popup_footer"><div class="f_3">54 м2</div></div>')); map.addLayer(markers);
HTML:
<div id="map_search_leaflet"></div>
CSS:
#map_search_leaflet{ height:570px; margin-bottom:20px; }
<a href="viber://add?number=792112345678"></a> <a href="whatsapp://send?phone=+792112345678"></a>
Javascript:
ymaps.ready(init); function init(){ var groups=[ { name:"Группа 1", style:"islands#blueCircleIcon", items:[ {name:"Санкт-Петербург, Московский пр-т, д. 44"}, {name:"Санкт-Петербург, ул. Байконурская, д. 14А, ТРК «Континент»"}, ] }, { name:"Группа 2", style:"islands#greenCircleIcon", items:[ {name:"Санкт-Петербург, Лиговский пр-т, д. 30А, ТРЦ «Галерея»"}, {name:"Санкт-Петербург, Петергофское ш., д. 51, ТРЦ «Жемчужная Плаза»"}, ] }, ]; var myMap=new ymaps.Map('map',{ center:[59.939095,30.315868], zoom:10 },{ searchControlProvider:'yandex#search' }), menu=$('<div class="menu"></div>'); for(var i=0,l=groups.length;i<l;i++){ createMenuGroup(groups[i]); } function createMenuGroup(group){ var menuItem=$('<div class="group"><p>'+group.name+'</p></div>'), collection=new ymaps.GeoObjectCollection(null,{preset:group.style}), submenu=$('<ul></ul>'); myMap.geoObjects.add(collection); menuItem.append(submenu).appendTo(menu); for(var j=0,m=group.items.length;j<m;j++){ createSubMenu(group.items[j],collection,submenu); } } function createSubMenu(item,collection,submenu){ var submenuItem=$('<li><a href="#">'+item.name+'</a></li>'); ymaps.geocode(item.name,{results:1}).then(function(res){ var coords=res.geoObjects.get(0).geometry.getCoordinates(); var placemark=new ymaps.Placemark(coords,{balloonContent:item.name}); collection.add(placemark); submenuItem.appendTo(submenu).find('a').bind('click',function(){ if(!placemark.balloon.isOpen()){ placemark.balloon.open(); } else{ placemark.balloon.close(); } return false; }); }); } menu.insertAfter($('#map')); }
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script> <script> //js here </script> <div id="map" style="height:400px;"></div>
Когда видео автоматически не запускается в Chrome. Добавить параметр muted кроме autoplay. Сам параметр отключает звук, по этому не понятно как это связано, но это работает.
Полный пример:
<video preload="auto" autoplay="autoplay" loop="loop" muted="muted"> <source src="/assets/video/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="/assets/video/video.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="/assets/video/video.ogv" type='video/ogg; codecs="theora, vorbis"'> </video>