Блог API Яндекс.Карт

Создание карты с указанием местоположения пользователя

У нас уже есть статья про создание кнопки определения местоположения. Однако часто возникают вопросы, как создать карту, изначально отцентрированную по местоположению пользователя.

Геокодирование

 

Мы написали новый класс сервиса геолокации, определяющий местоположение с помощью Geolocation API. Если сервис не поддерживается браузером, или возникает ошибка при определении местоположения, используется ymaps.geolocation (по IP). Для демонстрации работы класса был сделан пример.

Открыть класс в новом окне.

Посмотреть пример в новом окне.

Если вы написали статью или хотите рассказать о своей реализации, пишите нам в клубfacebook или на почту ymapsapi@ya.ru.

23 комментария
Игорь Воробьёв
28 января 2016, 06:14

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

информация и метоположение верно определилось

myLocation.then(function (loc) { var myCoords = [loc.latitude, loc.longitude],
myPlacemark = new ymaps.Placemark(myCoords, { balloonContentBody: loc.region, });

 

 

 

 

 

 

 

Дело в том что Geolocation API броузера такие данные как название города, страны и региона Вам не вернет. Только координаты.

Как выход можно попробовать геокодировать эти координаты и брать названия из ответа геокодера. Но это на даст 100% гарантии что они там будут, т.к. геокодер может и ничего не найти.

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

Игорь Воробьёв
28 января 2016, 06:14

спасибо будем пробовать! Считаю что функция определния города и вывода его очень важна ведь в этом и суть задаи по определению положения!

Игорь Воробьёв
28 января 2016, 06:14

 Добрый день!

Подскажите реализацию сравнения текущего местоположения с определённым городом

var dostavka = ""; var geolocation22 = properties.city;
if ( geolocation22 == 'деревня Михеево') { dostavka = 'курьером 200 руб'; }

Если следовать аналогии реализации по ip то такой код должен работать, но увы. Как правильно вывести переменную properties.city для сравнения

 

 

 

 

 

 

 

Что такое properties?

Игорь Воробьёв
28 января 2016, 06:14

из вашего примера 

 

balloonContentBodyLayout: ymaps.templateLayoutFactory.createClass([
 '',
 'Широта: $[properties.latitude]
',
 'Долгота: $[properties.longitude]
',
 'Масштаб: $[properties.zoom]
',
 'Город: $[properties.city|не найдено]
',
 // '[if properties.city]Город: $[properties.city]
[endif]',
 'Страна: $[properties.country|не найдено]
',
 // '[if properties.country]Страна: $[properties.country]
[endif]',
 'Регион: $[properties.region|не найдено]
',
 // '[if properties.region]Регион: $[properties.region]
[endif]',
 'Тип поиска: [if properties.isHighAccuracy]Geolocation API[else]IP-адрес[endif]',
 ''

 

Я не вижу тут аналогии.

В моем примере properties используется в контексте шаблона содержимого балуна (т.е. эти свойства шаблон берет из поля геообъекта)

Вы же к нему обращаетесь как к объявленной переменной.

Где в вашем коде создается properties?

Игорь Воробьёв
28 января 2016, 06:14

 

косяк, а каким образом присвоить можно свойва переменной, т/е/ откуда их взять  с ip там всё просто берем переменную geolocaion.city и всё, как быть тут?

 

 

Эти данные приходят в параметре loc

Игорь Воробьёв
28 января 2016, 06:14

вообщем как не пробовалБ данные не возвращает(((

 

 

дайте ссылку на страницу где Вы пробуете

Игорь Воробьёв
28 января 2016, 06:14

пробую на локалке, итак опять вернулся к этому проекту

как я это вижу,прописываю в шаблоне балуна вывод информации о доставки используя переменную dostavka

'', 'Предполагаемое место доставки
', 'Город: $[properties.city|не найдено]
', 'Регион: $[properties.region|не найдено]
', 'Вид доставки:' , dostavka, ''

Теперь нужно задать ей значение

var dostavka = ""; var geolocation22 = (значение из loc)city;
if ( geolocation22 == 'Москва') { dostavka = 'курьером 200 руб'; }

Проблема в том что я хоть убей не понимаю какое значение из loc нужно использовать, или как объявить properties.city

Заранее прошу прощения за возможно тупые вопросы, но хотелось бы разобраться

 

 

 

 

 

 

 

 

 

 

properties в шаблоне указывает на объект,

который передается вторым параметром в конструктор метки

myPlacemark=newymaps.Placemark(myCoords,loc,{

Вы можете задать свой объект, в качестве данных, и обращаться к его полям в шаблоне.

Игорь Воробьёв
28 января 2016, 06:14

myPlacemark = new ymaps.Placemark(myCoords, loc, dostavka, {

вот так?

и уже потом я могу сравнить  город юзера с городом из списка и получить на основании этого нужное значение

 

 

 

 

Нет параметра всего 3, а не 4

Что именно Вы хотите сделать?

Игорь Воробьёв
28 января 2016, 06:14

мне нужно получить значение города где находиться пользователь, чтобы сравнить его с заданым в массиве городом и вывести соответвующую информацию в балуне

Если определять по ip то сложностей не возникает, но погрешность большая

 

 

1. сформируйте свой объект данных:

var data = {

    city: loc.city,

    region: loc.region

};

if(loc.city) {

data.delivery = loc.city === 'Москва'?

    'курьером 200р.' : 'малиновым вертолетом 100_тыщ_мильёнов';

}

2. Сформируйте свой макет чтобы отображать данные в балуне

var Layout = ymaps.templateLayoutFactory.createClass([

'',

'$[properties.city]',

'$[properties.region]',

'$[properties.delivery|не смогли определить ваш город]',

''

].join(''));

3. Передайте данные и макет в конструктор метки

myPlacemark = new ymaps.Placemark(_coords_, data, {

balloonContentBodyLayout: Layout

}};

Игорь Воробьёв
28 января 2016, 06:14

 

var data = { city: loc.city, region: loc.region };
if( loc.region == 'Московская область')
{ dostavka = 'курьером 400р, Почта России 300руб' ; };

Спасибо, правда немного изменил код, приведённый выше почемуто постоянно писал не смогли определить ваш город

 

 

Игорь Воробьёв
28 января 2016, 06:14

Кстати если прописать так то будет работать в регионах не указанных в перечне

if( loc.region == '') { dostavka = 'Почта России 400руб' ; };

 

Константин Ф.
28 января 2016, 06:14

Приветствую,

Что-то не у меня ругается object positionerror.

Подозреваю какую-то совсем глупую ошибку.

Можете ли для примера дать самый примитивный html работающий просто при открытии в броузере?

 

Спасибо.

 

Ого, выложил на сайт и при загрузке оттуда все заработало. А при открытии локально нет. Почему? откройте глаза.

Это называется "подземные стуки" ))

Андрей Корнет
28 января 2016, 06:14

А вы можете скинуть полный код примера размещения такой системы на сайте?

А как получить координаты моего местоположения в адресной строке? Интересуется GET метод для дальнейшего их использования...и никак их туда не вытащить....как на основной карте яндекса...