29.08.2013, 18:07
|
Интересующийся
|
|
Регистрация: 29.07.2013
Сообщений: 29
|
|
Добавить яндекс карту на сайт и метку
Здравтсвуйте, меня интересует такой вот вопрос:
У меня есть сайт и есть база данных. В базе данных есть таблица с различными магазинами (Название магазина,адрес,и т.д). На определенной странице у меня выводиться информация по какому либо магазину. Скажите пожалуйста, как добавить на страницу с информацией о магазине яндекс-карту, на которой будет показано местоположение магазина?
______________
Я тут нашел на одном сайте информацию Как вставить карту на сайт и добавить метку адреса.
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"]? Будет работать?
Заранее большое спасибо!
|
|
29.08.2013, 19:39
|
Профессор
|
|
Регистрация: 16.05.2013
Сообщений: 229
|
|
ну допустим, при определенных условиях, если правильно вставите, будет
вы для каждой строчки кода тему на форуме создаете?
|
|
30.08.2013, 02:15
|
|
Профессор
|
|
Регистрация: 05.06.2009
Сообщений: 1,703
|
|
Alex351960,
А если скажем что не нет? Поверите и не будете пробовать?
__________________
Лучше установить FreeBSD, чем потратить 30 лет на Linux'ы и выяснить какой из них хуже.
Самые главные в жизни вещи - не вещи! (было написано на одном гараже =)
|
|
30.08.2013, 13:33
|
Интересующийся
|
|
Регистрация: 29.07.2013
Сообщений: 29
|
|
Сообщение от Tim
|
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>
В чем может быть проблема? Можно ли вообще добавлять несколько меток?
|
|
30.08.2013, 15:42
|
|
Профессор
|
|
Регистрация: 05.06.2009
Сообщений: 1,703
|
|
Alex351960,
Дык геокодер не находит наверное 2 адреса или хз. я что то подзабыл эти карты
__________________
Лучше установить FreeBSD, чем потратить 30 лет на Linux'ы и выяснить какой из них хуже.
Самые главные в жизни вещи - не вещи! (было написано на одном гараже =)
|
|
30.08.2013, 16:21
|
Профессор
|
|
Регистрация: 12.04.2010
Сообщений: 557
|
|
Сообщение от Alex351960
|
Можно ли вообще добавлять несколько меток?
|
очевидно, да
http://jsfiddle.net/pw4Tc/
комментарии к коду:
1) массив с адресами лучше не зашивать в html, а вынести в отдельный скрипт, формируемый динамически, т.е. подключить как <script src="adresses.php" type="text/javascript"></script>, в нем и сформировать массив.
2) в примере сначала строится карта с наперед заданным отображением, потом наносятся метки. это самый простой вариант. если тебе надо показать карту только в тех рамках, в которых имеются метки (с максимально возможным зумом, при котором все метки видны), то сначала загружаешь все адреса, потом смотришь их координаты и определяешь прямоугольник, по нему и делаешь зум и позиционирование карты.
|
|
30.08.2013, 17:01
|
|
Профессор
|
|
Регистрация: 02.08.2012
Сообщений: 293
|
|
если нет необходимости динамически увеличивать/уменьшать количество адресов (т.е. в ближайшем будущем эти адреса останутся неизменными) то много проще буде "вручную" определить координаты этих адресов на карте и запомнить уже массив этих координат.
|
|
30.08.2013, 17:13
|
Профессор
|
|
Регистрация: 12.04.2010
Сообщений: 557
|
|
в общем да.
заодно так же "вручную" определить зум и координаты, чтобы сразу открыть карту правильно.
|
|
30.08.2013, 18:17
|
Интересующийся
|
|
Регистрация: 29.07.2013
Сообщений: 29
|
|
Сообщение от Яростный Меч
|
очевидно, да
http://jsfiddle.net/pw4Tc/
комментарии к коду:
1) массив с адресами лучше не зашивать в html, а вынести в отдельный скрипт, формируемый динамически, т.е. подключить как <script src="adresses.php" type="text/javascript"></script>, в нем и сформировать массив.
2) в примере сначала строится карта с наперед заданным отображением, потом наносятся метки. это самый простой вариант. если тебе надо показать карту только в тех рамках, в которых имеются метки (с максимально возможным зумом, при котором все метки видны), то сначала загружаешь все адреса, потом смотришь их координаты и определяешь прямоугольник, по нему и делаешь зум и позиционирование карты.
|
Спасибо большое! попробую так сделать. А еще вопрос: Можно , чтобы на метке было написано название магазина, которое тоже берется из бд?
Последний раз редактировалось Alex351960, 30.08.2013 в 18:20.
|
|
30.08.2013, 18:37
|
Профессор
|
|
Регистрация: 12.04.2010
Сообщений: 557
|
|
Сообщение от Alex351960
|
Можно , чтобы на метке было написано название магазина
|
да, разрешаю.
http://jsfiddle.net/zp4Eb/
|
|
|
|