How do we make the markers automatically updated?



  • Hello! When adding to the base of the new coordinates, the marker should be placed on the map without updating the page. Ajax has not worked (if it does), so it's hard to implement, I'll be grateful for help. The page is the construction of the marker into the base (from the Google documentation):

    <?php
    require("config.php");
    function parseToXML($htmlStr) 
    { 
    $xmlStr=str_replace('<','&lt;',$htmlStr); 
    $xmlStr=str_replace('>','&gt;',$xmlStr); 
    $xmlStr=str_replace('"','&quot;',$xmlStr); 
    $xmlStr=str_replace("'",'&apos;',$xmlStr); 
    $xmlStr=str_replace("&",'&amp;',$xmlStr); 
    return $xmlStr; 
    } 
    

    $result = $pdo->query("SELECT * FROM markers WHERE 1");

    header("Content-type: text/xml");
    // Start XML file, echo parent node
    echo '<markers>';
    // Iterate through the rows, printing XML nodes for each
    while ($row = $result->fetch()){
    // ADD TO XML DOCUMENT NODE
    echo '<marker ';
    echo 'id="' . $row['id'] . '" ';
    echo 'address="' . parseToXML($row['address']) . '" ';
    echo 'description="' . parseToXML($row['description']) . '" ';
    echo 'lat="' . $row['lat'] . '" ';
    echo 'lng="' . $row['lng'] . '" ';
    echo 'username="' . parseToXML($row['username']) . '" ';
    echo '/>';
    }
    // End XML file
    echo '</markers>';

    Strange of maps and markers:

    <?php
    require_once "config.php"
    ?>

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Los Santos Police Department - 911 Online Map</title>
    <!-- Disallow users to scale this page -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="shortcut icon" href="https://www.lacity.org/sites/g/files/wph571/themes/site/favicon.ico" type="image/vnd.microsoft.icon" />
    <style type="text/css">
    /* Allow the canvas to use the full height and have no margins */
    html, body, #map-canvas {
    height: 100%;
    margin: 0
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    </head>
    <body>

    <!-- The container the map is rendered in -->
    <div id="map-canvas"></div>

    <!-- Load all javascript -->
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="js/SanMap.min.js"></script>
    <script>
    var customIcons = {
    restaurant: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
    },
    bar: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
    }
    };
    var infoWindow = new google.maps.InfoWindow;

    downloadUrl("genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i &lt; markers.length; i++) {
          var address = markers[i].getAttribute("address");
          var description = markers[i].getAttribute("description");
          var username = markers[i].getAttribute("username");
          var point = new SanMap.getLatLngFromPos(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "&lt;strong&gt;911 ВЫЗОВ: &lt;/strong&gt;" + username + "&lt;br/&gt;" + 
              "&lt;strong&gt;ЛОКАЦИЯ: &lt;/strong&gt;" + address + "&lt;br/&gt;" + "&lt;strong&gt;ОПИСАНИЕ: &lt;/strong&gt;" + description;
          var icon = customIcons[username] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    
    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }
    
    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };
      request.open('GET', url, true);
      request.send(null);
    }
    function doNothing() {}
    
    
    var mapType = new SanMapType(2, 5, function (zoom, x, y) {
        return x == -1 &amp;&amp; y == -1 
        ? "tiles/map.outer.png" 
        : "tiles/sanandreas." + zoom + "." + x + "." + y + ".png";//Where the tiles are located
    });
    
    var satType = new SanMapType(2, 3, function (zoom, x, y) {
        return x == -1 &amp;&amp; y == -1 
        ? null 
        : "tiles/map." + zoom + "." + x + "." + y + ".png";//Where the tiles are located
    });
    
    
    var map = SanMap.createMap(document.getElementById('map-canvas'), 
        {'Карта': mapType, 'Спутник': satType }, 2, null, false, 'Спутник');
    

    </script>
    </body>

    SanMap is a game map that allows us to work with a game map, not our Earth.



  • In this case, the server may be used EventSource

    EventSource Used to receive server events, without closure of the compound. Processed on the client's side. The open connection is one-sided, i.e. the client can only listen to incoming messages from the server.

    The code leafings will be followed by a decisive task, rather than an algorithm of solutions.HTML I'm not gonna put it on, it's standard.

    // Создаем функцию обертку, чтобы позже ее вызвать
    function eventSource() {
    
    var event = new EventSource("URI скрипта сервера, который будет вещать");
    
    // Начинаем слушать события сервера
    event.onmessage = function (message) {
    
        // Пользовательские данные находятся в поле data.
        var latLng = JSON.parse(message.data);
    
        latLng.lat = parseFloat(latLng.lat);
    
        latLng.lng = parseFloat(latLng.lng);
    
        // Передаем долготу/широту методу, который создает метки
        initMarker(latLng);
    };
    

    }

    Listing 2. We with the map.

    // Делаем map глобальным, чтобы обращатся к нему из других методов
    var map;

    function initMap() {

    map = new google.maps.Map(document.getElementById("map"), {
    
        zoom: 2,
        center: {lat: 37.0902, lng: -95.7129},
        disableDefaultUI: false
    });
    
    // После того, как инициализирована карта, вызываем нашу обертку, которая будет принимать данные с сервера
    eventSource();
    

    }

    function initMarker(latLng) {

    var marker = new google.maps.Marker({
    
        position: latLng,
        map: map
    });
    

    }

    Listing 3. It's.

    <?php

    // Разрешаем кросс-доменные запросы, иначе попытка соединения клиента провалится
    header("Access-Control-Allow-Origin: *");

    // MIME ответа должен быть text/event-stream, иначе попытка соединения клиента провалится
    header("Content-Type: text/event-stream");

    $dbConnect = mysqli_connect("dbServer", "dbUser", "dbPassword", "database");

    $id = array();

    while (1) {

    // Предположим, что имеем таблицу с id координат, долготой, широтой
    $query = "SELECT `id`, `lat`, `lng` FROM `coordinate`";
    
    $result = mysqli_query($dbConnect, $query);
    
    // Перебор полученных данных
    while ($row = mysqli_fetch_assoc($result)) {
    
        // Если идентификатора нету в массиве, значит он еще не был выведен
        if (!in_array($row["id"], $id)) {
    
            // Добавляем в массив, чтобы исключить повторный вывод
            $id[] = $row["id"];
    
            // Удаляем идентификатор из результирующего ответа клиенту
            unset($row["id"]);
    
            // Отдаем json клиенту
            echo "data:" . json_encode($row) . "\n\n";
        }
    }
    
    ob_end_flush();
    
    flush();
    
    sleep(5);
    

    }

    Examples of the code are quite rude (to make a normal filtering of the already shown coordinates. Resolve the demand problem, which removes all the contents of the table, etc., but the workers. If you open the map and add the data to the database, the marker will be displayed without reloading the page.

    Brauser support http://caniuse.com/#search=server-Sent%20Events No. IE Not all good.

    If a bilateral exchange is required, use may be made WebSocket

    Used Ajax In this case, it is inaccurate because the client needs to question the server at intervals for the availability of data (every survey - new http He generates more traffic.

    https://developer.mozilla.org/ru/docs/Web/API/EventSource https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2