实时更新标记 [英] Update marker in real time

问题描述

我需要从json文件中获取新的位置，这些位置将在regualr间隔更新，以便在地图上更新它，而不必重复加载整个页面。如何在不使用Ajax的情况下做到这一点

  if（GBrowserIsCompatible（））{
 // == add controls 
 var map = new GMap（document.getElementById（map））; 
 map.addControl（new GLargeMapControl（））; 
 map.addControl（new GMapTypeControl（））; 
 map.setCenter（new GLatLng（-29.870879，30.977258），15）; 
 
 var htmls = []; 
 var i = 0; 
 
 //创建标记并设置infoWindow 
函数createMarker（point，ID，name）{
 var marker = new GMarker（point）; 
 GEvent.addListener（marker，click，function（）{
 marker.openInfoWindowHtml（ID +< br />; Name：+ name）; 
 
} ）; 
 
返回标记; 
 
 
 
 $ b process_Data = function（doc）{
 // parse json file 
 var jsonData = eval（'（'+ doc +'）'）; 
 
 // ========在Google Maps上绘制标记============ 
 
 for（var i = 0 ; i< jsonData.markers.length; i ++）{
 var point = new GLatLng（jsonData.markers [i] .lat，jsonData.markers [i] .lng）; 
 var marker = createMarker（point，jsonData.markers [i] .ID，jsonData.markers [i] .name）; 
 map.addOverlay（marker）; 
 
 
 
 $ b GDownloadUrl（points.json，process_Data）; 
 
 $ b  

解决方案

var marker;

//每10秒钟
setInterval（updateMarker，10000）;

函数updateMarker（）{
$ .post（'/ path / to / server / getPosition'，{}，function（json）{
var LatLng = new google。 maps.LatLng（json.latitude，json.longitude）;
marker.setPosition（LatLng）;
}）;
}


I need fetch the new position from json file which will be updated at regualr intervals in order to update it on the map without reloading the whole page repeatedly. How can I do without using Ajax

                 if (GBrowserIsCompatible()) {
                 //==add controls
                 var map = new GMap(document.getElementById("map"));
                 map.addControl(new GLargeMapControl());
                 map.addControl(new GMapTypeControl());
                 map.setCenter(new GLatLng(-29.870879, 30.977258),15);

                 var htmls = [];
                 var i = 0;

                 //create marker and set up infoWindow
                 function createMarker(point,ID,name) {
                 var marker = new GMarker(point);
                 GEvent.addListener(marker, "click", function() {
                 marker.openInfoWindowHtml(ID+"<br/>Name: " +name);

                 });

                  return marker;
                }



            process_Data = function(doc) {
                 //parse json file
                 var jsonData = eval('(' + doc + ')');

                 // ======== Plots the markers on Google Maps============

                   for (var i=0; i<jsonData.markers.length; i++) {
                       var point = new GLatLng(jsonData.markers[i].lat, jsonData.markers[i].lng);
                        var marker = createMarker(point,jsonData.markers[i].ID,jsonData.markers[i].name);
                       map.addOverlay(marker);

                       }
                     }

                      GDownloadUrl("points.json", process_Data);

                      }

解决方案

var marker;

// every 10 seconds
setInterval(updateMarker,10000);

function updateMarker() {
   $.post('/path/to/server/getPosition',{}, function(json) {
      var LatLng = new google.maps.LatLng(json.latitude, json.longitude);
      marker.setPosition(LatLng);
   });
}

这篇关于实时更新标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！