Для отображения карты и геолокации по адресу или другим критериям на Вашей ВЕБ-странице, необходимо скачать JavaScript Leaflet и плагин Leaflet.GeoSearch.

Скачать последнюю версию Leaflet можно на сайте http://leafletjs.com/ по ссылке http://leafletjs.com/download.html

Скачать оригинальную версию Leaflet.GeoSearch можно по сcылке https://github.com/smeijer/L.GeoSearch или https://github.com/smeijer/L.GeoSearch/archive/master.zip

В стандартном архиве Leaflet.GeoSearch содержится поиск на серверах Google, OpenStreetMap, Nokia и другие. Используя примеры можно этот список легко расширить.

Набор серверов геолокации для Leaflet.GeoSearch имеют вид:

Использование

Пример использования OpenStreetMap

new L.Control.GeoSearch({
     provider: new L.GeoSearch.Provider.OpenStreetMap()
}).addTo(map);

Пример использования Google

new L.Control.GeoSearch({
     provider: new L.GeoSearch.Provider.Google()
}).addTo(map);

Пример использования GISFile для слоя

new L.Control.GeoSearch({
     provider: new L.GeoSearch.Provider.GISFile( {type:'layer', name:'Имя слоя'})
}).addTo(map);

Пример использования GISFile для проекта (карты)

new L.Control.GeoSearch({
     provider: new L.GeoSearch.Provider.GISFile( {type:'map', name:'Имя проекта'})
}).addTo(map);

Вы можете заполнить и другие настраиваемые параметры, такие как: установка позиции панели поиска и отображение маркера.

new L.Control.GeoSearch({
     provider: new L.GeoSearch.Provider.OpenStreetMap(),
     position: 'topcenter',
     showMarker: true
}).addTo(map);

Выбор сервера геокодирования

Рассмотренный выше вариант предусматривает использование только одного поставщика для поиска, мы это немного подправили. 

Для предоставления пользователю выбора сервера скачайте и замените Java скрипт http://gisfile.com/js/l.control.geosearch.js и CSS файл http://gisfile.com/css/l.geosearch.css

В новой версии добавлен параметр providers - список поставщиков геокодирования и selected - активный сервер по умолчанию в списке.

new L.Control.GeoSearch({

   selected: 0,
   providers: [{name:'GISFile', provider: new L.GeoSearch.Provider.GISFile( {type:'layer', name:'world'})},
   {name:'Google', provider: new L.GeoSearch.Provider.Google()},
   {name:'OpenStreetMap', provider: new L.GeoSearch.Provider.OpenStreetMap()}]
}).addTo(map);

Обновлённый скрипт можно использовать и как оригинальный (примеры выше). 

Пример использования

Пример отображения карты 

<html>

<head>

  <link rel="stylesheet" href="leaflet.css" />
  <!--[if lte IE 8]>
  <link rel="stylesheet" href="leaflet.ie.css" type="text/css" >
  <![endif]-->
  <script src="leaflet.js"></script>

  <script src="l.control.geosearch.js"></script>
  <link rel="stylesheet" href="l.geosearch.css" />

  <script src="l.geosearch.provider.openstreetmap.js"></script>
  <script src="l.geosearch.provider.google.js"></script>
  <script src="l.geosearch.provider.gisfile.js"></script> 

</head>

<body>

  <div id="map" style="width: 500px; height: 500px"></div>     

  <script type="text/javascript">

    var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);

    new L.Control.GeoSearch({
      searchLabel: 'Строка поиска',
      notFoundMessage: 'Не найдено',
      position: 'topcenter',
      showMarker: true,
      selected: 0,
      providers: [{name:'GISFile', provider: new L.GeoSearch.Provider.GISFile( {type:'layer', name:'world'})},
      {name:'Google', provider: new L.GeoSearch.Provider.Google()},
      {name:'OpenStreetMap', provider: new L.GeoSearch.Provider.OpenStreetMap()}]
    }).addTo(map);

</body>

</html>

 

Olga1984 · 08.07.2016 16:12:53 ·