Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
Sobolev_Erik
0 / 0 / 0
Регистрация: 24.04.2018
Сообщений: 30
1

Google maps API Динамическое изменение карты

31.07.2018, 15:52. Просмотров 1237. Ответов 6

Здравствуйте.
Есть сервер, написанный на node.js и html страница на которой должна отображаться карта google. подскажите как передать координаты точек(маркеров) маршрута с сервера на карту. Все координаты передаются с помощью JSON, в виде массива.

Работа происходит так: Я передаю массив координат на сервер(переменная msg). С сервера он передается на веб страницу. Но карта не отображается.

Прилагаю код:


PHP/HTML
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
    </style>
    <title>chat</title>
    <script src="socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" charset="utf-8"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script charset="utf-8">
    
      var HOST = 'localhost';
      var PORT = 3000; // Указываем порт на котором стоит сокет
      var socket = io.connect('http://' + HOST + ':' + PORT); // Тут мы объявляем "socket" (дальше мы будем с ним работать) и подключаемся сразу к серверу через порт
 
      $(document).on('click', 'button', function(){ // Прослушка кнопки на клик
          var message = $('input').val(); // Все что в поле для ввода записываем в переменную
          socket.emit('message', message); // Отправляем событие 'message' на сервер  как переменная
          $('input').val(null); // Заполняем поле для ввода 'пустотой'
      });
 
 
      socket.on('messageToClients', function(msg){
          console.log('| => ' + msg); // Логгирование в консоль браузера
          $('textarea').val(msg +'\n');
          msg = JSON.parse(msg);
          var start_point; //начало
          var end_point; //конец
          var way = []; // промежуточные точки(массив объектов)
          var map;
          msg.forEach(function(item, i, msg) {
            if (i == 0)
              start_point = new google.maps.LatLng(msg[i][0], msg[i][1]);
            else if(i == msg.length - 1)
              end_point = new google.maps.LatLng(msg[i][0], msg[i][1]);
            else
              way[i-1] = {location: new google.maps.LatLng(msg[i][0], msg[i][1]), 
                          stopover:true};
          });
        
          function initialize() {
            var mapOptions = {
              zoom: 12,
              center: start_point
            };
           map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            var directionsDisplay = new google.maps.DirectionsRenderer();
            var directionsService = new google.maps.DirectionsService();
            directionsDisplay.setMap(map);
            directionsDisplay.setOptions( { suppressMarkers: true, suppressInfoWindows: true } );
          
            var marker = new google.maps.Marker({
              position: start_point,
              map: map
            });
          
            var marker = new google.maps.Marker({
              position: end_point,
              map: map
            }) ;   
    
            google.maps.event.addListener(marker, 'click', function () {
              infowindow.open(map, this);
            }); 
          
            var request = {
              origin: start_point,  //начало маршрута
              destination: end_point, //конец маршрута
              travelMode: google.maps.TravelMode.DRIVING, //тип транспорта(DRIVING - на автомобиле, WALKING - пешком)
              unitSystem: google.maps.UnitSystem.METRIC,  //система измерения (METRIC - метрическая, IMPERIAL - британская)
              waypoints:way,                              //массив промежуточных точек
              optimizeWaypoints: true,                    //оптимизация маршрута с помощью точек в waypoints (true или false)
              provideRouteAlternatives: true,             //поиск альтернативных маршрутов (true или false)
              avoidHighways: false,                       //избегать автомагистралей (true или false)
              avoidTolls: true                            //избегать платных дорого (true или false)
            };
    
            directionsService.route(request, function(result, status) {
              if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(result);
                var routes = result.routes;                   //массив с вариантами маршрутов
                var leg = routes[0].legs;                     //массив с отрезками маршрута
                var lenght = leg[0].distance.text;            //дистанция первого отрезка (всего маршрута, если отрезок один)
                var duration = leg[0].duration.text;          //время первого отрезка (всего маршрута, если отрезок один)
                infowindow = new google.maps.InfoWindow({ content: 'Дистанция: '+lenght+'<br>Продолжительность: '+duration });
                infowindow.open(map, marker);
              }
            });
          }
          google.maps.event.addDomListener(window, 'load', initialize);
      });
    </script>
  </head>
  <body>
    <textarea name="name" rows="8" cols="40"></textarea>
    <p></p>
    <input type="text" name="text" size="20">
    <button type="button" name="button">Отправить</button>
    <div id="map-canvas"></div>
  </body>
</html>

сервер
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var express = require('express'); // Подключаем express
var app = express();
var server = require('http').Server(app); // Подключаем http через app
var io = require('socket.io')(server); // Подключаем socket.io и указываем на сервер
var PORT = 3000; 
 
function ab2str(buf) {
  return String.fromCharCode.apply(null, new Uint16Array(buf));
}
 
server.listen(PORT); // Теперь мы можем подключиться к нашему серверу через localhost:3000 при запущенном скрипте
console.log('Script has been started...'); //Логгируем.
app.use(express.static(__dirname + '/public')); // Отправляет "статические" файлы из папки public при коннекте 
 
io.on('connection', function (socket) {
  socket.on('message', function(msg){ // Обработчик на событие 'message'
      console.log('Message: ' + msg);
      io.sockets.emit('messageToClients', msg); // Отправляем всем сокетам событие 'messageToClients'
  });
});
0
Лучшие ответы (1)
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
31.07.2018, 15:52
Ответы с готовыми решениями:

Динамическое размещение маркеров на Google maps
Есть сервер для авиасимулятора FSX и есть файл whazzup.txt !05/02/2014 08:07 !GENERAL VERSION...

Изменение размера окошка карты google maps
Добрый день! Есть скрипт: &lt;script type=&quot;text/javascript&quot;&gt; function initialize() { var...

Google maps API
Всем привет! Возник интересный вопрос (для начинающего) насчёт Google Maps API. Общеизвестный...

Google maps API
Здравствуйте. Нужна помощь по 575,7. Нужно сделать такую карту: • Допустим, на карте есть 50...

Infowindow Google Maps API
как убрать закрытие балуна( infowindow ) в Google Maps API ?

6
Sobolev_Erik
0 / 0 / 0
Регистрация: 24.04.2018
Сообщений: 30
01.08.2018, 16:20  [ТС] 2
неужели настолько сложная проблема даже для прошаренных?
0
Fedor92
Эксперт HTML/CSS
2934 / 2497 / 1063
Регистрация: 15.12.2012
Сообщений: 9,390
Записей в блоге: 9
01.08.2018, 17:34 3
Цитата Сообщение от Sobolev_Erik Посмотреть сообщение
неужели настолько сложная проблема даже для прошаренных?
Проверяйте, всё по очереди... Для начала стоит проверить цепляется ли JSON... Если JSON цепляется - вероятнее всего ошибки допущены на этапе построения массива маркеров...
0
Sobolev_Erik
0 / 0 / 0
Регистрация: 24.04.2018
Сообщений: 30
02.08.2018, 12:20  [ТС] 4
В том то и дело, что все данные передаются. Я не могу понять, как подгрузить эти самые данные на карту.
К примеру, у меня есть координаты: [[61.768165, 34.29937], [61.785144, 34.347614], [61.792629, 34.347890], [61.791106, 34.366414], [61.795738, 34.365658]] Я отправляю их на сервер в виде массива. Там они преобразуются в JSON.

Клиент их принимает, преобразует обратно в массив, и распределяет.
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
          msg = JSON.parse(msg);
          var start_point; //начало
          var end_point; //конец
          var way = []; // промежуточные точки(массив объектов)
          var map;
          msg.forEach(function(item, i, msg) {
            if (i == 0)
              start_point = new google.maps.LatLng(msg[i][0], msg[i][1]);
            else if(i == msg.length - 1)
              end_point = new google.maps.LatLng(msg[i][0], msg[i][1]);
            else
              way[i-1] = {location: new google.maps.LatLng(msg[i][0], msg[i][1]), 
                          stopover:true};
          });
А вот дальше ничего не происходит. почему-то в маркеры начала, конца и промежуточные точки эти координаты передаются, но карта(объект map) все равно имеет значение undefined и не отображается. Скрипт завершается. И я никак не пойму, почему так происходит
0
Fedor92
Эксперт HTML/CSS
2934 / 2497 / 1063
Регистрация: 15.12.2012
Сообщений: 9,390
Записей в блоге: 9
02.08.2018, 13:36 5
Sobolev_Erik, вот здесь рассматривается подобное поведение - возможно Вам поможет этот ответ...
1
j2FunOnly
Модератор
Эксперт JS
1288 / 1115 / 597
Регистрация: 05.06.2015
Сообщений: 2,454
02.08.2018, 15:58 6
Лучший ответ Сообщение было отмечено Sobolev_Erik как решение

Решение

Sobolev_Erik, если смотреть по диагонали, то мне показалась такая картина:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// клик по документу, всё понятно
$(document).on('click', 'button', function() {
  var message = $('input').val();
  socket.emit('message', message);
  $('input').val(null);
});
 
socket.on('messageToClients', function(msg) {
  console.log('| => ' + msg); // Логгирование в консоль браузера
  /* vars desclaration */
  msg.forEach(function(item, i, msg) { /* waypoint definition */ });
 
  function initialize() {
    /* GMaps initialization callback */
  }
 
  /* set init callback on window.onload */
  google.maps.event.addDomListener(window, 'load', initialize);
});
То есть у вас: пользователь кликает на кнопку - отправить сообщение серверу - сервер емитит messageToClients - сокет-ио отрабатывает колбек: объявляет функцию initialize и назначает обработчик window.onload - но мне, кажется, данное событие уже не наступит ...
1
Sobolev_Erik
0 / 0 / 0
Регистрация: 24.04.2018
Сообщений: 30
03.08.2018, 10:10  [ТС] 7
Fedor92, j2FunOnly, Спасибо. Проблему решил. Стал просто вызывать карту по нажатию кнопки, а не при загрузки HTML страницы.
Также, я руководствовался вот этим: https://ruseller.com/lessons.php?rub=1&id=718

Вот мое решение:
PHP/HTML
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!--
массив координат для тестирования:
[[61.785144, 34.347614], [61.792629, 34.347890], [61.791106, 34.366414]]
 -->
 
<!DOCTYPE html PUBLIC">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Динамическая загрузка API Карт Google | Демонстрация</title>
    <script src="socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" charset="utf-8"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API"></script>
    <script>
        var take; //в эту переменную будем получать инф-ию с сервера
        var HOST = 'localhost';
        var PORT = 3000; // Указываем порт на котором стоит сокет
        var socket = io.connect('http://' + HOST + ':' + PORT);
 
        $(document).on('click', 'button', function(){ // Прослушка кнопки на клик
            var message = $('input').val(); // Все что в поле для ввода записываем в переменную
            socket.emit('message', message); // Отправляем событие 'message' на сервер  как переменная
            $('input').val(null); // Заполняем поле для ввода 'пустотой'
        });
 
        socket.on('messageToClients', function(msg){
            console.log('| => ' + msg); // Логгирование в консоль браузера
            $('textarea').val(msg +'\n'); //вывод ответа с сервера
            take = JSON.parse(msg);  //Преобразование JSON объекта в набор объектов(в моем случае это был массив координатных точек)
        });
 
        function loadMAP(points_mass)
        {
            var start_point; //начало
            var end_point; //конец
            var way = []; //промежуточные точки(массив объектов)
 
            //распределение координатных точек по объектам, передаваемым на карту
            points_mass.forEach(function(item, i, points_mass) {
                if (i == 0)
                    start_point = new google.maps.LatLng(points_mass[i][0], points_mass[i][1]);
                else if(i == points_mass.length - 1)
                    end_point = new google.maps.LatLng(points_mass[i][0], points_mass[i][1]);
                else
                    way[i-1] = {
                        location: new google.maps.LatLng(points_mass[i][0], points_mass[i][1]), 
                        stopover:true};
            });
 
            document.getElementById("loadButton").value = "Загрузка...";
            document.getElementById("loadButton").disabled = true;
            initialize(start_point, end_point, way);
        }
 
        function initialize(start_point, end_point, way_mass) {
            var map = new google.maps.Map(document.getElementById('map_canvas'), {
                center: start_point,
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var directionsDisplay = new google.maps.DirectionsRenderer();
            var directionsService = new google.maps.DirectionsService();
            directionsDisplay.setMap(map);
            directionsDisplay.setOptions( { suppressMarkers: true, suppressInfoWindows: true } );
 
            var marker = new google.maps.Marker({
                position: start_point,
                map: map
            });
            var marker = new google.maps.Marker({
                position: end_point,
                map: map
            });   
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, this);
            }); ;
 
            var request = {
                origin: start_point,  //начало маршрута
                destination: end_point, //конец маршрута
                travelMode: google.maps.TravelMode.DRIVING, //тип транспорта(DRIVING - на автомобиле, WALKING - пешком)
                unitSystem: google.maps.UnitSystem.METRIC,  //система измерения (METRIC - метрическая, IMPERIAL - британская)
                waypoints:way_mass,                         //массив промежуточных точек
                optimizeWaypoints: true,                    //оптимизация маршрута с помощью точек в waypoints (true или false)
                provideRouteAlternatives: true,             //поиск альтернативных маршрутов (true или false)
                avoidHighways: false,                       //избегать автомагистралей (true или false)
                avoidTolls: true                            //избегать платных дорого (true или false)
            };
            directionsService.route(request, function(result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(result);
                    var routes = result.routes;                   //массив с вариантами маршрутов
                    var leg = routes[0].legs;                     //массив с отрезками маршрута
                    var lenght = leg[0].distance.text;            //дистанция первого отрезка (всего маршрута, если отрезок один)
                    var duration = leg[0].duration.text;          //время первого отрезка (всего маршрута, если отрезок один)
                    infowindow = new google.maps.InfoWindow({ content: 'Дистанция: '+lenght+'<br>Продолжительность: '+duration });
                    infowindow.open(map, marker);
                }
            });
        }
    </script>
</head>
<body">
    
    <textarea name="name" rows="8" cols="40"></textarea>
    <br>
    <input type="text" name="text" size="20">
    <button type="button" name="button">Отправить</button>
    <br>
    <input type="button" onclick="loadMAP(take);" id="loadButton" value="Загрузить карту Google" />
    <div id="map_canvas" style="width: 100%; height: 750px; border:1px solid black;"></div>
    
</body>
</html>
0
03.08.2018, 10:10
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
03.08.2018, 10:10

Google maps api Кластеризация
День добрый, ранее писал о проблеме слияния js скрипта геолокации и xml парсинга. Предыдущий...

Google Maps Javascript API v3
Я вставил Карту гугл на сайт. Как сделать так, чтоб она сразу находила местоположение пользователя?...

Google maps api SQL + GEO
Дорогие киберфорумчане! Есть проблемка, написал скрипт по гугловским гайдам. В конструкции два...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.