Клуб API Карт

Как автоматически рассчитать масштаб карты которая откроется по заранее известным координатам?

Пост в архиве.

Всем привет. Представлю сперва код.

 

var myMap, myPlacemark;
ymaps.ready(init);
function init() {
    myMap = new ymaps.Map('map', {
        center: [$('input[name=latitude]').val(), $('input[name=longitude]').val()],
        zoom: 10,
        controls: ['zoomControl']
    });
    myPlacemark = new ymaps.Placemark([$('input[name=latitude]').val(), $('input[name=longitude]').val()]);
    myMap.geoObjects.add(myPlacemark);
}

 

При загрузке странички загружается сразу карта с координатами которые лежат в 2-х инпутах и масштабом равным 10, который я указал сам. Координаты указаны Москвы. Если искать через - http://api.yandex.ru/maps/tools/getlonglat/, здесь масштаб равен 9, при поиске Ростовской области масштаб меняется автоматически. Как реализовать такое автомасштабирование? Пытался разобрать, не получается. Нужно в общем, чтобы я вручную масштаб карты не указывал, а он сам как-то подстраивался, как сделано в этом примере - http://api.yandex.ru/maps/tools/getlonglat/. Спасибо.

23 комментария

Этот масштаб приходит из поиска.

Его можно хранить у себя и выставлять при создании карты через поле state.bounds

 

http://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Map.xml

Алексей Р.
28 января 2016, 00:11

Не совсем понял - "Этот масштаб приходит из поиска.". Координаты берутся у меня с базы и записываются в инпуты перед тем как карта начнет формироватся и брать эти координаты. В базу я эти координаты ложу следующей ф-цией.

function geocode($tx = ''){
    $data = array('longitude' => 0, 'latitude' => 0);
   
    if($tx != ''){
        $parse = 'http://geocode-maps.yandex.ru/1.x/?geocode='.$tx.'&format=json&results=1';
        $check = get_headers($parse);
       
        if($check[0] == 'HTTP/1.1 200 OK'){
            $json = json_decode(file_get_contents($parse), true);
           
            if(is_array($json) == true){
                if(isset($json['response']['GeoObjectCollection']['featureMember'][0]['GeoObject']['Point']['pos'])){
                    $coords = explode(' ', $json['response']['GeoObjectCollection']['featureMember'][0]['GeoObject']['Point']['pos']);
                   
                    if(count($coords) == 2){
                        $data = array('longitude' => $coords[0], 'latitude' => $coords[1]);
                    }
                }
            }
        }
    }
   
    return $data;
}

Вместо координат центра и масштаба можно хранить область показа и создавать карту по ней

В примере ответа геокодера она есть

 

 <boundedBy xmlns="http://www.opengis.net/gml"> <Envelope> <lowerCorner>37.583490 55.750778lowerCorner> <upperCorner>37.591701 55.755409upperCorner> Envelope> boundedBy>

 

Алексей Р.
28 января 2016, 00:11

В общем проверил, результат огорчил. Делаем эксперимент.

 ответ геокодера

Обращаем внимание на:

38.220306 45.95151944.324251 50.214249

Подставляем в:

myMap = new ymaps.Map('map', {
    bounds:[[45.951519, 38.220306], [50.214249, 44.32425]],
    controls: ['zoomControl']
});

В результате получаем размытое изображение с неверным масштабом карты. Если проверить здесь - http://api.yandex.ru/maps/tools/getlonglat/, результат совсем иной. Верно же я все делаю?

Да масштаб тот же самый, просто в 1.0 он только целому числу был равен, а тут дробный, поэтому есть размытие.

Можно использовать ymaps.util.bounds.getCenterAndZoom чтобы это исправить

Сделал пример

http://jsfiddle.net/tfe4D/

Алексей Р.
28 января 2016, 00:11

Благодарю. Осталось 2 нюанса:

1 - конечно хотелось бы в БД хранить 2 координаты центра, дабы меньше полей было и чтобы масштаб просчитывался адекватно, как в примере - http://api.yandex.ru/maps/tools/getlonglat/, возможно такое?

2 - как в этом примере добавить Placemark, допустим есть следующий адресс и нужно точно указать на карте, дабы не потерятся в куче улиц, проспектов

Алексей Р.
28 января 2016, 00:11

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

Подправленынй пример - http://jsfiddle.net/H8c5X/

getCenterAndZoom возвращает объект с полями center и zoom

Поле center можно использовать в конструкторе метки

http://jsfiddle.net/H8c5X/1/

Алексей Р.
28 января 2016, 00:11

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

Центр карты у вас по адресу, и значит метка в центре по адресу?

Алексей Р.
28 января 2016, 00:11

Нужно, чтобы отмечало меткой допустим такой адресс - ростовская область, ростов-на-дону, ул станиславского 103. Застрял пока на этом - http://jsfiddle.net/Hkr7d/. Ставить метку получается, но не на адресе. И желательно, чтобы отмеченный адрес меткой был в центре карты.

Адрес сначала надо геокодировать.

Если адреса одни и теже лучше это сделать на сервере

Затем создать метку по полученным координатам.

 

Алексей Р.
28 января 2016, 00:11

1 - я и так на сервере геокодирую адрес - код

2 - вот как раз я не могу поставить метку так как нужно

по приведенной вами ссылке http://jsfiddle.net/Hkr7d/

я не вижу кода установки метки

Алексей Р.
28 января 2016, 00:11

исправил - http://jsfiddle.net/Hkr7d/1/

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

А что не так?

стоит на 103-м доме по улице Станиславского, как и в запросе

Алексей Р.
28 января 2016, 00:11

Прошу прощения за свою слепость, все как надо. Спасибо.

Алексей Р.
28 января 2016, 00:11

Обнаружил странное явление, карта не отображается, просто вижу заставку Яндекса - http://jsfiddle.net/H8c5X/3/

 

Запрос - тыц

у меня сейчас все отобразилось

Алексей Р.
28 января 2016, 00:11

Вот как на картинке хочется - http://s020.radikal.ru/i711/1405/6e/91a076ce4cdf.jpg, чтобы было. Только вместо этой икноки домик и по центру синий прицел который всегда в центре как в этом примере - http://api.yandex.ru/maps/tools/getlonglat/.

"прицел" это не геообъект, а контрол.

Я когда-то делал такой же инструмент для версии АПИ  2.0, там можно посмотреть его реализацию.

http://dimik.github.io/ymaps/examples/location-tool/

Код доступен на github

Алексей Р.
28 января 2016, 00:11

 

"прицел" это не геообъект, а контрол.

для этого нужно подключать дополнительные либы? а то пробовал загнать тот код  на jsfiddle.net, то ничего не вышло

Да все что с CrossControl + картинку крестика