Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Добавить яндекс карту на сайт и метку (https://javascript.ru/forum/dom-window/41050-dobavit-yandeks-kartu-na-sajjt-i-metku.html)

Alex351960 29.08.2013 18:07

Добавить яндекс карту на сайт и метку
 
Здравтсвуйте, меня интересует такой вот вопрос:
У меня есть сайт и есть база данных. В базе данных есть таблица с различными магазинами (Название магазина,адрес,и т.д). На определенной странице у меня выводиться информация по какому либо магазину. Скажите пожалуйста, как добавить на страницу с информацией о магазине яндекс-карту, на которой будет показано местоположение магазина?
______________
Я тут нашел на одном сайте информацию Как вставить карту на сайт и добавить метку адреса.
http://codd.ws/page/jandekskarty-vst...-adresa-obekta

Я так понимаю, что нужно создать блок, подключить скрипт загрузки API и вставить этот код в блок
<script type='text/javascript'>
    ymaps.ready(init);
    function init(){
        var geocoder = new ymaps.geocode(
            // Строка с адресом, который нужно геокодировать
            'Москва, ул. Льва Толстого, 16',
            // требуемое количество результатов
            { results: 1 }
        );
        // После того, как поиск вернул результат, вызывается callback-функция
        geocoder.then(
                function (res) {
                    // координаты объекта
                    var coord = res.geoObjects.get(0).geometry.getCoordinates();
                    var map = new ymaps.Map('map', {
                        // Центр карты - координаты первого элемента
                        center: coord,
                        // Коэффициент масштабирования
                        zoom: 7,
                        // включаем масштабирование карты колесом
                        behaviors: ['default', 'scrollZoom'],
                        controls: ['mapTools']
                    });
                    // Добавление метки на карту
                    map.geoObjects.add(res.geoObjects.get(0));
                    // устанавливаем максимально возможный коэффициент масштабирования - 1
                    map.zoomRange.get(coord).then(function(range){
                        map.setCenter(coord, range[1] - 1)
                    });
                    // Добавление стандартного набора кнопок
                    map.controls.add('mapTools')
                        // Добавление кнопки изменения масштаба
                            .add('zoomControl')
                        // Добавление списка типов карты
                            .add('typeSelector');
                }
        );
    }
</script>

В этом коде есть место где написан адрес. Можно ли вставить на его место адрес , который указан в базе данных, а точнее вставить: $название массива["adress"]? Будет работать?
Заранее большое спасибо!

mta88 29.08.2013 19:39

Цитата:

Будет работать?
ну допустим, при определенных условиях, если правильно вставите, будет

вы для каждой строчки кода тему на форуме создаете?

Tim 30.08.2013 02:15

Alex351960,
А если скажем что не нет? Поверите и не будете пробовать?

Alex351960 30.08.2013 13:33

Цитата:

Сообщение от Tim (Сообщение 269976)
Alex351960,
А если скажем что не нет? Поверите и не будете пробовать?

Попробовал, все работает. Но , почему-то не получается сделать сразу несколько меток. Пробовал писать адрес второй метки прямо в коде - не работает. Пробовал выводить в цикле из базы данных - тоже не работает. Может я не правильно вторую метку добавляю?
Вот как я добавлял одну метку:
<script type='text/javascript'>
    ymaps.ready(init);
    function init(){
        var geocoder = new ymaps.geocode(
            // Строка с адресом, который нужно геокодировать
            '<?php echo $myrow["adress"]; ?>',
           			// требуемое количество результатов
            { results: 1 }
        );
        // После того, как поиск вернул результат, вызывается callback-функция
        geocoder.then(
                function (res) {
                    // координаты объекта
                    var coord = res.geoObjects.get(0).geometry.getCoordinates();
                    var map = new ymaps.Map('map', {
                        // Центр карты - координаты первого элемента
                        center: coord,
                        // Коэффициент масштабирования
                        zoom: 7,
                        // включаем масштабирование карты колесом
                        behaviors: ['default', 'scrollZoom'],
                        controls: ['mapTools']
                    });
                    // Добавление метки на карту
                    map.geoObjects.add(res.geoObjects.get(0));
                    // устанавливаем максимально возможный коэффициент масштабирования - 1
                    map.zoomRange.get(coord).then(function(range){
                        map.setCenter(coord, range[1] - 1)
                    });
                    // Добавление стандартного набора кнопок
                    map.controls.add('mapTools')
                        // Добавление кнопки изменения масштаба
                            .add('zoomControl')
                        // Добавление списка типов карты
                            .add('typeSelector');
                }
        );
    }
</script>

А две метки почему-то не добавляются. вот код:
<script type='text/javascript'>
    ymaps.ready(init);
    function init(){
        var geocoder = new ymaps.geocode(
            // Строка с адресом, который нужно геокодировать
            '<?php echo $myrow["adress"]; ?>',
             'Нижний Новгород',
			// требуемое количество результатов
            { results: 1 }
        );
        // После того, как поиск вернул результат, вызывается callback-функция
        geocoder.then(
                function (res) {
                    // координаты объекта
                    var coord = res.geoObjects.get(0).geometry.getCoordinates();
                    var map = new ymaps.Map('map', {
                        // Центр карты - координаты первого элемента
                        center: coord,
                        // Коэффициент масштабирования
                        zoom: 7,
                        // включаем масштабирование карты колесом
                        behaviors: ['default', 'scrollZoom'],
                        controls: ['mapTools']
                    });
                    // Добавление метки на карту
                    map.geoObjects.add(res.geoObjects.get(0));
                    // устанавливаем максимально возможный коэффициент масштабирования - 1
                    map.zoomRange.get(coord).then(function(range){
                        map.setCenter(coord, range[1] - 1)
                    });
                    // Добавление стандартного набора кнопок
                    map.controls.add('mapTools')
                        // Добавление кнопки изменения масштаба
                            .add('zoomControl')
                        // Добавление списка типов карты
                            .add('typeSelector');
                }
        );
    }
</script>

В чем может быть проблема? Можно ли вообще добавлять несколько меток?

Tim 30.08.2013 15:42

Alex351960,
Дык геокодер не находит наверное 2 адреса или хз. я что то подзабыл эти карты

Яростный Меч 30.08.2013 16:21

Цитата:

Сообщение от Alex351960
Можно ли вообще добавлять несколько меток?

очевидно, да
http://jsfiddle.net/pw4Tc/

комментарии к коду:
1) массив с адресами лучше не зашивать в html, а вынести в отдельный скрипт, формируемый динамически, т.е. подключить как <script src="adresses.php" type="text/javascript"></script>, в нем и сформировать массив.

2) в примере сначала строится карта с наперед заданным отображением, потом наносятся метки. это самый простой вариант. если тебе надо показать карту только в тех рамках, в которых имеются метки (с максимально возможным зумом, при котором все метки видны), то сначала загружаешь все адреса, потом смотришь их координаты и определяешь прямоугольник, по нему и делаешь зум и позиционирование карты.

deivan 30.08.2013 17:01

если нет необходимости динамически увеличивать/уменьшать количество адресов (т.е. в ближайшем будущем эти адреса останутся неизменными) то много проще буде "вручную" определить координаты этих адресов на карте и запомнить уже массив этих координат.

Яростный Меч 30.08.2013 17:13

в общем да.
заодно так же "вручную" определить зум и координаты, чтобы сразу открыть карту правильно.

Alex351960 30.08.2013 18:17

Цитата:

Сообщение от Яростный Меч (Сообщение 270095)
очевидно, да
http://jsfiddle.net/pw4Tc/

комментарии к коду:
1) массив с адресами лучше не зашивать в html, а вынести в отдельный скрипт, формируемый динамически, т.е. подключить как <script src="adresses.php" type="text/javascript"></script>, в нем и сформировать массив.

2) в примере сначала строится карта с наперед заданным отображением, потом наносятся метки. это самый простой вариант. если тебе надо показать карту только в тех рамках, в которых имеются метки (с максимально возможным зумом, при котором все метки видны), то сначала загружаешь все адреса, потом смотришь их координаты и определяешь прямоугольник, по нему и делаешь зум и позиционирование карты.

Спасибо большое! попробую так сделать. А еще вопрос: Можно , чтобы на метке было написано название магазина, которое тоже берется из бд?

Яростный Меч 30.08.2013 18:37

Цитата:

Сообщение от Alex351960
Можно , чтобы на метке было написано название магазина

да, разрешаю.

http://jsfiddle.net/zp4Eb/


Часовой пояс GMT +3, время: 18:16.