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 выдает нормальные данные, но метки на карте странные. они прилипли к левому краю карты и все время там висят, как ни двигай карту. это уже какая то ошибка в индексе наверно

Новые блоги и статьи Все статьи Все блоги /
Звёздная пыль kumehtar 20.06.2025 Я просто это себе представляю: как создавался этот мир. Как энергия слипалась в маленькие частички. Как они собирались в первые звёзды, как во вселенной впервые появился Свет. Как эти звёзды. . .	Создание нейросети с PyTorch AI_Generated 19.06.2025 Ключевое преимущество PyTorch — его питоновская натура. В отличие от TensorFlow, который изначально был построен как статический вычислительный граф, PyTorch предлагает динамический подход. Это. . .	JWT аутентификация в ASP.NET Core UnmanagedCoder 18.06.2025 Разрабатывая веб-приложения, я постоянно сталкиваюсь с дилеммой: как обеспечить надежную аутентификацию пользователей без ущерба для производительности и масштабируемости? Классические подходы на. . .	Краткий курс по С# aaLeXAA 18.06.2025 Здесь вы найдете все необходимые функции чтоб написать програму на C# Задание 1: КЛАСС FORM 1 public partial class Form1 : Form { Spisok listin = new Spisok(); . . .	50 самых полезных примеров кода Python для частых задач py-thonny 17.06.2025 Эффективность работы разработчика часто измеряется не количеством написаных строк, а скоростью решения задач. Готовые сниппеты значительно ускоряют разработку, помогают избежать типичных ошибок и. . .
C# и продвинутые приемы работы с БД stackOverflow 17.06.2025 Каждый . NET разработчик рано или поздно сталкивается с ситуацией, когда привычные методы работы с базами данных превращаются в источник бессонных ночей. Я сам неоднократно попадал в такие ситуации,. . .	Angular: Вопросы и ответы на собеседовании Reangularity 15.06.2025 Готовишься к техническому интервью по Angular? Я собрал самые распространенные вопросы, с которыми сталкиваются разработчики на собеседованиях в этом году. От базовых концепций до продвинутых. . .	Архитектура Onion в ASP.NET Core MVC stackOverflow 15.06.2025 Что такое эта "луковая" архитектура? Термин предложил Джеффри Палермо (Jeffrey Palermo) в 2008 году, и с тех пор подход только набирал обороты. Суть проста - представьте себе лук с его. . .	Unity 4D GameUnited 13.06.2025 Четырехмерное пространство. . . Звучит как что-то из научной фантастики, правда? Однако для меня, как разработчика со стажем в игровой индустрии, четвертое измерение давно перестало быть абстракцией из. . .	SSE (Server-Sent Events) в ASP.NET Core и .NET 10 UnmanagedCoder 13.06.2025 Кажется, Microsoft снова подкинула нам интересную фичу в новой версии фреймворка. Работая с превью . NET 10, я наткнулся на нативную поддержку Server-Sent Events (SSE) в ASP. NET Core Minimal APIs. Эта. . .

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

	JS и API яндекс карт 29.09.2016, 17:49. Показов 6251. Ответов 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 яндекс карт

Решение