3 апреля 2013 в 1:50
Хочу на сайт вставить онлайн карту России с поиском по городам и улицам.
Где бы такую надыбать?
Онлайн карта с поиском
Главные вкладки
3 апреля 2013 в 1:50
Комментарии
http://api.yandex.ru/maps/
http://drupal.org/project/yamaps
http://api.2gis.ru/doc/maps/info/
Пойдут?
Тоже интересно послушать мнения спецов...
Долгое время работал с картографией, рекомендую leafletjs.com
А БД с городами, адресами и координатами есть в наличии?
нету никакой БД, поэтому и ищу готовые примеры онлайн карт типа яндекса. Какая карта нужна я в первом посту написал.
Пробую с api яндекса собрать, да нихрена не выходит у меня.
короче без знаний программирования не обойтись.
Тыкал сегодня весь день, так и не натыкал.
http://api.yandex.ru/maps/tools/constructor/
вот готовая карта. Сразу показала мне мой город с улицами..и сразу есть поле поиска по улицам. Вот ее бы вместе с этим поиском и встроить на сайт
http://xandeadx.ru/blog/drupal/604
вот это вот определяет по IP локацию, показывает автоматически твой город
<script type="text/javascript">
ymaps.ready(init);
function init() {
// Данные о местоположении, определённом по IP
var geolocation = ymaps.geolocation,
// координаты
coords = [geolocation.latitude, geolocation.longitude],
myMap = new ymaps.Map('map', {
center: coords,
zoom: 10
});
myMap.geoObjects.add(
new ymaps.Placemark(
coords,
{
// В балуне: страна, город, регион.
balloonContentHeader: geolocation.country,
balloonContent: geolocation.city,
balloonContentFooter: geolocation.region
}
)
);
}
</script>
<div id="map" style="width:100%; height:500px"></div>
остается добавить кнопки масштабирования (сейчас просто по двойному клику, а хотелось бы кнопки дополнительно для понятности) и поиск
это уже карта, определяющая автоматом твое местоположение, и имеет кнопки масштабирования, управления и т.п.
<script type="text/javascript">
ymaps.ready(init);
function init() {
// Данные о местоположении, определённом по IP
var geolocation = ymaps.geolocation,
// координаты
coords = [geolocation.latitude, geolocation.longitude],
myMap = new ymaps.Map('map', {
center: coords,
zoom: 10
});
myMap.controls
// Кнопка изменения масштаба.
.add('zoomControl', { left: 5, top: 5 })
// Список типов карты
.add('typeSelector')
// Кнопка изменения масштаба - компактный вариант.
// Расположим её справа.
.add('smallZoomControl', { right: 5, top: 75 })
// Стандартный набор кнопок
.add('mapTools', { left: 35, top: 5 });
myMap.geoObjects.add(
new ymaps.Placemark(
coords,
{
// В балуне: страна, город, регион.
balloonContentHeader: geolocation.country,
balloonContent: geolocation.city,
balloonContentFooter: geolocation.region
}
)
);
}
</script>
<div id="map" style="width:100%; height:500px"></div>
Нашел API Яндекс.Карт в фейсбуке:
http://www.facebook.com/ymapsapi
Меня только одно в Яндекс.Карт тревожит: субъективно 2ГИС карты точнее.
Свой дом в 2ГИС нашел, а в Яндекс нет...
Вот такое нашел сравнение карт:
http://appleinsider.ru/eto-interesno/tak-li-xoroshi-karty-google-kak-po-...
P.S. Простите, если не в тему.
2ГИС мне просто внешне больше понравились...но их API я вообще не осилил...либо просто не догнался, потому что долго не ковырял
Благодаря пользователю deadrash с форума htmlbook.ru карта была таки собрана:
<script type="text/javascript">
ymaps.ready(init);
function init() {
// Данные о местоположении, определённом по IP
var geolocation = ymaps.geolocation,
// координаты
coords = [geolocation.latitude, geolocation.longitude],
bounds = [
[geolocation.latitude -1, geolocation.longitude -1]
, [geolocation.latitude +1, geolocation.longitude +1]
], //Определяем границу поиска текущими координатами
res,
timeOut,
searchField = document.getElementById('search')
;
searchField.onkeyup = getVal;
myMap = new ymaps.Map('map', {
center: coords,
zoom: 10
});
myMap.controls
// Кнопка изменения масштаба.
.add('zoomControl', { left: 5, top: 5 })
// Список типов карты
.add('typeSelector')
// Кнопка изменения масштаба - компактный вариант.
// Расположим её справа.
.add('smallZoomControl', { right: 5, top: 75 })
// Стандартный набор кнопок
.add('mapTools', { left: 35, top: 5 });
function getVal() {
clearTimeout(timeOut);
timeOut = setTimeout(function(){
searchAddr(searchField.value);
}, 300);
}
function searchAddr(addr) {
// Поиск координат
var myGeocoder = ymaps.geocode(
addr,
{
boundedBy: bounds
, strictBounds: false
, results: 1
}
);
myGeocoder.then(
function (dot) {
//удаляем предыдущие метки
res && myMap.geoObjects.remove(res.geoObjects);
res = dot;
// Выбираем первый результат геокодирования.
var firstGeoObject = res.geoObjects.get(0);
// Движемся к результату поиска
myMap.setCenter(
firstGeoObject.geometry.getCoordinates(),
16,
{
duration: 400
, delay: 0
, checkZoomRange: true
, timingFunction: 'ease-in-out'
}
);
// Задаем изображение для иконок меток.
res.geoObjects.options.set('preset', 'twirl#carIcon');
// Добавляем полученную метку на карту.
myMap.geoObjects.add(res.geoObjects);
}
// ,
// function (err) {
// alert('Ошибка');
// }
);
}
}
</script>
<div id="map" style="width:100%; height:500px">Поиск на карте: <form action="" method="post" onsubmit="return false;"><input type="text" id="search"></form></div>
все работает, но не понимаю зачем искать "Ек", "Ека", "Екатер", "Екатерин"....глупо запускать скрипт по вводу букв, и видеть как все меняется при каждом нажатии, почему нельзя было сделать просто по нажатию кнопки "Искать". Думайте так не логичнее???
я повторюсь, может лучше leafletjs + plugins(см раздел Geocoding)