JS и API яндекс карт

@dapkopoen · Регистрация: 04.01.2013

Студворк — интернет-сервис помощи студентам

всем привет. есть база данных mysql, там есть поля координаты, ссылка.
мне надо поставить метки на яндекс карту, координаты из поля бд, а в балуне отобразить ссылку из поля бд. как это сделать, подскажите.
вывести просто метку могу на крту. а как координаты из бд?

@evikza · 29.09.2016, 19:40

dapkopoen, какая версия API? Покажу на своем примере Яндекс API 2.1 + jQuery подключите

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
$(document).ready(function() {
 
var myMap, myPlacemark, coords;
 
  ymaps.ready(init);
 
  // load myMap.
  function init() {
    var myMap = new ymaps.Map("map", {
      center: [56.8075, 60.6025],
      zoom: 13,
      type: "yandex#map", // yandex#satellite
      controls: ['zoomControl', 'geolocationControl'], // зум и геолокация
    }, {
      balloonPanelMaxMapArea: 0, 
      suppressMapOpenBlock: true, // убираем плашку "открыть в браузере"
      balloonMaxWidth: 180
    });
    //Запрос данных и вывод маркеров на карту
    function show() {
      $.getJSON("json.php",
        function(json) {
          for (i = 0; i < json.points.length; i++) {
 
            var myPlacemark = new ymaps.Placemark([json.points[i].lat, json.points[i].lon], { // это кооридинаты
              // Свойства балуна
              iconCaption: json.points[i].iconText,
              balloonContentBody: [
                '<div class="street">' +
                json.points[i].hintText +
                '</div>',
                '<i class="desc">' +
                json.points[i].balloonText +
                '</i>',
              ].join(''),
              balloonContentFooter: json.points[i].humanDate
            }, {
              // Опции
              preset: json.points[i].stylePlacemark,
            });
 
            // Добавляем метку на карту
            myMap.geoObjects.add(myPlacemark);
 
          }
 
        });
    };
    // показываем метки при загрузки страницы:
    show();
  }
});

Если нужен сам json.php:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
//  разрешаем кросс-доменные запросы
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json; charset=utf-8');
if (version_compare(phpversion(), '5.3.0', '>=')  == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE); 
 
require("bd.php"); // подключаемся к DB
 
$data = array(); // в этот массив запишем то, что выберем из базы
 
 
$ta = mysql_query("
        SELECT * FROM VASHA_TABLE
                  "); // сделаем запрос в БД
 
if (mysql_num_rows($ta) > 0) {
    while ($row = mysql_fetch_assoc($ta)) { // оформим каждую строку результата
        // как ассоциативный массив
        $data[] = $row; // допишем строку из выборки как новый элемент результирующего массива
    }
} else {
 
}
$points = array(points=>$data); // группируем массив
echo json_encode($points, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE); // выводим как JSON в человеко-понятном виде PHP > 5.4
?>

@dapkopoen · 29.09.2016, 19:59 **[ТС]**

evikza, ничего не понял. а где сам index.php?

@evikza · 29.09.2016, 20:06

dapkopoen, эм. ну допустим вот так: (скрипт карты и вывод подключены после тега </body>)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<html lang="en">
 
<head>
  <title>API</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://api-maps.yandex.ru/2.1.41/?lang=ru_RU" type="text/javascript"></script>
  <link type="text/css" rel="stylesheet" href="css/style.css"></link>
</head>
<style>
#map {
    width: 600px;
    height: 600px;
}
</style>
<body>
      <div id="map"></div>
</body>
<script>
$(document).ready(function() {
 
var myMap, myPlacemark, coords;
 
  ymaps.ready(init);
 
  // load myMap.
  function init() {
    var myMap = new ymaps.Map("map", {
      center: [56.8075, 60.6025],
      zoom: 13,
      type: "yandex#map", // yandex#satellite
      controls: ['zoomControl', 'geolocationControl'], // зум и геолокация
    }, {
      balloonPanelMaxMapArea: 0, 
      suppressMapOpenBlock: true, // убираем плашку "открыть в браузере"
      balloonMaxWidth: 180
    });
    //Запрос данных и вывод маркеров на карту
    function show() {
      $.getJSON("json.php",
        function(json) {
          for (i = 0; i < json.points.length; i++) {
 
            var myPlacemark = new ymaps.Placemark([json.points[i].lat, json.points[i].lon], { // это кооридинаты
              // Свойства балуна
              iconCaption: json.points[i].iconText,
              balloonContentBody: [
                '<div class="street">' +
                json.points[i].hintText +
                '</div>',
                '<i class="desc">' +
                json.points[i].balloonText +
                '</i>',
              ].join(''),
              balloonContentFooter: json.points[i].humanDate
            }, {
              // Опции
              preset: json.points[i].stylePlacemark,
            });
 
            // Добавляем метку на карту
            myMap.geoObjects.add(myPlacemark);
 
          }
 
        });
    };
    // показываем метки при загрузки страницы:
    show();
  }
});
</script>
</html>

Вам осталось подключить ваш json.php, ну и поменять конечно же поля, которые вы хотите вывести.

@dapkopoen · 29.09.2016, 20:08 **[ТС]**

evikza, куда подключить

@evikza · 29.09.2016, 20:10

Не по теме:

dapkopoen, хорошо, так мы с вами далеко не уедем. Напишите название таблицы, и какие поля вам необходимо вывести. Или дайте дамп вашей базы.

@dapkopoen · 29.09.2016, 20:12 **[ТС]**

evikza, поля: координаты, название, ссылка.

Добавлено через 40 секунд
evikza, MyTable например. ее еще нет

@evikza · 29.09.2016, 20:32

dapkopoen, хорошо, давайте начнем сначало.

Создайте таблицу с названием MyTable. Создайте в таблице поля, lat (широта), lot (долгота) и myurl (тут будет ваша ссылка).

Измените в файле bd.php значение на свои:

SQL
1
2
3
4
$sdb_name = "localhost"; // сервер подключения базы
$user_name = "root"; // имя пользователя
$user_password = "password"; // пароль
$db_name = "dps"; // имя базы данных

Больше ничего менять ненадо.

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

@dapkopoen · 29.09.2016, 21:56 **[ТС]**

evikza, спасибо, буду пробовать

Добавлено через 8 минут
evikza, не работает. я добавил точку в бд. но на карте ничего нет

Добавлено через 7 минут
evikza, json не получает данные из базы

@evikza · 29.09.2016, 21:58

dapkopoen, дайте дамп вашей базы. $db_name = "dps"; // имя базы данных правильно указали?

@dapkopoen · 29.09.2016, 22:05 **[ТС]**

все указал правильно. вот хост - http://airkuban.ru/map-scenery/

@evikza · 29.09.2016, 22:35

dapkopoen, так, сначало залейте в базу мой дамп, я добавил поле id (инкремент) - сам заполняется, при добавлении полей.

Если все так же, отображения не будет. Проверьте правильность подключения к DB. Потому что, у меня все работает.

@dapkopoen · 29.09.2016, 22:44 **[ТС]**

evikza, создал таблицу заново. залил ваш дамп. прописал подключение в bd.php. метки на карте нет. может как то проверку подключения сделать. кстати, json.php выдает вместо массива надпись Resource id #5. откуда этот бред не пойму вообще

Добавлено через 4 минуты
evikza, все заработало.спасибо!

@evikza · 29.09.2016, 22:50

dapkopoen, у меня вопрос возник, а зачем вам связь с базой данных? Если кроме вас их никто не будет добавлять. Засуньте массив JSON в файл json.json:

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{  
   "points":[  
      {  
         "id":"1",
         "lat":"56.7889",
         "lon":"60.5921",
         "myurl":"12345"
      },
      {  
         "id":"2",
         "lat":"56.7880",
         "lon":"60.5960",
         "myurl":"54321"
      }
   ]
}

Поменяйте в index.html:

JavaScript
1
$.getJSON("json.json", // файл, который подключаем

Пусть метки будут статически, или принципиально использовать базу данных?

@dapkopoen · 30.09.2016, 15:49 **[ТС]**

evikza, не я буду добавлять, а пользователи. для них будет скрипт добавления меток в базу данных. под паролем, конечно. типа админки.

Добавлено через 10 часов 7 минут
evikza, не подскажите в чем у меня ошибка? я сделал скрипт забивки данных в бд. но не хочет работать.
форма:

HTML5
1
2
3
4
5
6
<form method="POST" action="">
        <input name="lat" type="text" placeholder="lat"/>
        <input name="lon" type="text" placeholder="lon"/>
        <input name="myurl" type="text" placeholder="Тmyurl"/>
        <input type="submit" value="Отправить"/>
</form>

скрипт:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
require 'bd.php';
// Переменные с формы
$lat = $_POST['lat'];
$lon = $_POST['lon'];
$myurl = $_POST['myurl']; 
 
// Подключение к базе данных
$db = mysql_connect($db_host,$db_user,$db_password) OR DIE("Не могу создать соединение ");
 
// Выборка базы
mysql_select_db("mydb",$db);
 
// Установка кодировки соединения
mysql_query("SET NAMES 'utf8'",$db);
 
$result = mysql_query ("INSERT INTO mytable (lat,lon,myurl) VALUES ('$lat','$lon','$myurl')");
     
    if ($result = 'true'){
        echo "Информация занесена в базу данных";
    }else{
        echo "Информация не занесена в базу данных";
    }
}

Добавлено через 39 минут
evikza, сегодня почему то метка не выходит на карте, а json вот что выдает - {"points":[{"id":"1","lat":"56.7889","lon":"60.5921 ","myurl":"12345"}]} 
Warning: Unknown: 1 result set(s) not freed. Use mysql_free_result to free result sets which were requested using mysql_query() in Unknown on line 0 

Добавлено через 6 часов 8 минут
evikza, ваш скрипт живет своей жизнью. каждый раз разный результат. я все исправил. оказывается названиятаблиц mytable и MyTable не одно и тоже. теперь json собирает информацию из бд, а вот index.html упорно не выводит метку на карту. не знаю что уже и делать. одна надежда на вас.))

@evikza · 30.09.2016, 20:45

dapkopoen, у вас в скрипте добавления меток, несостыковочка. Вы во второй раз подключаетесь к базе, да еще и с другими переменными, которых нет:

PHP
1
$db = mysql_connect($db_host,$db_user,$db_password) OR DIE("Не могу создать соединение ");

В файле db.php уже есть подключение.

ваш скрипт живет своей жизнью

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

Получается, заходя на страницу, пользователь будет видеть форму, и сам добавлять lat, lon? А откуда он знает широту и долготу?

У меня все завелось) Прикручу ajax (добавление без перезагрузки) и выложу.

@dapkopoen · 30.09.2016, 21:00 **[ТС]**

evikza, я знаю про эти нестыковки. сейчас json выдает {"points":[{"id":"1","lat":"56.7889","lon":"60.5921 ","myurl":"12345"}]} 
Warning: Unknown: 1 result set(s) not freed. Use mysql_free_result to free result sets which were requested using mysql_query() in Unknown on line 0 и из за этого текста метки нет на карте. а на локалке json выдает нормально, но на карте все равно нет метки.
а насчет добавления lat lot - эти пользователи технически продвинутые, координаты знают.

@evikza · 30.09.2016, 21:29

dapkopoen, ну, так как я не знаю, что у вас там в коде творится, и что вы меняли. Выкладываю еще раз архив. С формой добавления без перезагрузки страницы. Поменяйте опять же данные в db.php и если нужно, таблицу в json.php

А насчет ошибки Use mysql_free_result to free result sets which were requested using mysql_query(). Можно выключить вывод в php.ini, заменой на строчку mysql.trace_mode = Off

Сразу скажу, в MYSQL плохо разбираюсь)

@dapkopoen · 01.10.2016, 09:24 **[ТС]**

evikza, я на хостинге не могу ничего менять в php.iini

Добавлено через 14 минут
evikza, я установил ваш второй пример. поменял название таблицы, заменил данные доступа к базе. меток на карте нет, json выдает следующее - Notice: Use of undefined constant points - assumed 'points' in E:\1XAMPP\htdocs\json.php on line 21
{"points":[{"lat":"45.4747","lot":"52.3656","myurl" :"http:\/\/gert.ru\/"},{"lat":"45.0201","lot":"39.2356","myu rl":"dfyhjnfgdhdfggf"}]}

@dapkopoen · 01.10.2016, 09:36 **[ТС]**

evikza, устранил ошибку. надо было в 21 строке points в кавычки взять. теперь json выдает нормальные данные, но метки на карте странные. они прилипли к левому краю карты и все время там висят, как ни двигай карту. это уже какая то ошибка в индексе наверно

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@dapkopoen 5 / 5 / 1 Регистрация: 04.01.2013 Сообщений: 393

	JS и API яндекс карт 29.09.2016, 17:49. Показов 6698. Ответов 35 Метки нет (Все метки) всем привет. есть база данных mysql, там есть поля координаты, ссылка. мне надо поставить метки на яндекс карту, координаты из поля бд, а в балуне отобразить ссылку из поля бд. как это сделать, подскажите. вывести просто метку могу на крту. а как координаты из бд? 0

@dapkopoen 5 / 5 / 1 Регистрация: 04.01.2013 Сообщений: 393
	29.09.2016, 19:59 [ТС]
	evikza, ничего не понял. а где сам index.php? 0

@dapkopoen 5 / 5 / 1 Регистрация: 04.01.2013 Сообщений: 393
	29.09.2016, 20:08 [ТС]
	evikza, куда подключить 0

@evikza
	29.09.2016, 20:10
	Не по теме: dapkopoen, хорошо, так мы с вами далеко не уедем. Напишите название таблицы, и какие поля вам необходимо вывести. Или дайте дамп вашей базы. 0

@dapkopoen 5 / 5 / 1 Регистрация: 04.01.2013 Сообщений: 393
	29.09.2016, 20:12 [ТС]
	evikza, поля: координаты, название, ссылка. Добавлено через 40 секунд evikza, MyTable например. ее еще нет 0

@dapkopoen 5 / 5 / 1 Регистрация: 04.01.2013 Сообщений: 393
	29.09.2016, 21:56 [ТС]
	evikza, спасибо, буду пробовать Добавлено через 8 минут evikza, не работает. я добавил точку в бд. но на карте ничего нет Добавлено через 7 минут evikza, json не получает данные из базы 0

@evikza 968 / 530 / 244 Регистрация: 20.05.2015 Сообщений: 776
	29.09.2016, 21:58
	dapkopoen, дайте дамп вашей базы. `$db_name = "dps"; // имя базы данных` правильно указали? 0

@dapkopoen 5 / 5 / 1 Регистрация: 04.01.2013 Сообщений: 393
	29.09.2016, 22:44 [ТС]
	evikza, создал таблицу заново. залил ваш дамп. прописал подключение в bd.php. метки на карте нет. может как то проверку подключения сделать. кстати, json.php выдает вместо массива надпись Resource id #5. откуда этот бред не пойму вообще Добавлено через 4 минуты evikza, все заработало.спасибо! 0

@dapkopoen 5 / 5 / 1 Регистрация: 04.01.2013 Сообщений: 393
	30.09.2016, 21:00 [ТС]
	evikza, я знаю про эти нестыковки. сейчас json выдает {"points":[{"id":"1","lat":"56.7889","lon":"60.5921 ","myurl":"12345"}]}<br /> <b>Warning</b>: Unknown: 1 result set(s) not freed. Use mysql_free_result to free result sets which were requested using mysql_query() in <b>Unknown</b> on line <b>0</b><br /> и из за этого текста метки нет на карте. а на локалке json выдает нормально, но на карте все равно нет метки. а насчет добавления lat lot - эти пользователи технически продвинутые, координаты знают. 0

@dapkopoen 5 / 5 / 1 Регистрация: 04.01.2013 Сообщений: 393
	01.10.2016, 09:24 [ТС]
	evikza, я на хостинге не могу ничего менять в php.iini Добавлено через 14 минут evikza, я установил ваш второй пример. поменял название таблицы, заменил данные доступа к базе. меток на карте нет, json выдает следующее - Notice: Use of undefined constant points - assumed 'points' in E:\1XAMPP\htdocs\json.php on line 21 {"points":[{"lat":"45.4747","lot":"52.3656","myurl" :"http:\/\/gert.ru\/"},{"lat":"45.0201","lot":"39.2356","myu rl":"dfyhjnfgdhdfggf"}]} 0

@dapkopoen 5 / 5 / 1 Регистрация: 04.01.2013 Сообщений: 393
	01.10.2016, 09:36 [ТС]
	evikza, устранил ошибку. надо было в 21 строке points в кавычки взять. теперь json выдает нормальные данные, но метки на карте странные. они прилипли к левому краю карты и все время там висят, как ни двигай карту. это уже какая то ошибка в индексе наверно Миниатюры 0

JS и API яндекс карт

Решение