Question

我需要谷歌地图重新加载标记w / o重新加载整个地图...用于跟踪目的....以及显示/隐藏流量而不再加载地图... 例如。每15秒重新加载一次标记，以便更新位置......

这是我的代码

 function loadmap2(i) {
  var map = new google.maps.Map(document.getElementById("map2"), {
    center: new google.maps.LatLng(40.742575,-73.874932),  //40.671037,-73.991976   40.710313,-73.858452
    zoom: 11,
    mapTypeId: 'roadmap'
  });

if (i == 'traffic') {traffic();} else {};

function traffic() {
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
  var infoWindow = new google.maps.InfoWindow;
  // Change this depending on the name of your PHP file
  downloadUrl("markers_trucks_xml.cfm?date=<cfoutput>#URL.date#</cfoutput>", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
    var id = markers[i].getAttribute("id");
var icon = markers[i].getAttribute("icon");//icon
    var color = markers[i].getAttribute("color");//color
var type = markers[i].getAttribute("type");
var data1 = markers[i].getAttribute("data1");
    var data2 = markers[i].getAttribute("data2");
    var data3 = markers[i].getAttribute("data3");
    var data4 = markers[i].getAttribute("data4");
    var data5 = markers[i].getAttribute("data5");
    var data6 = markers[i].getAttribute("data6");
    var data7 = markers[i].getAttribute("data7");
    var data8 = markers[i].getAttribute("data8");
    var data9 = markers[i].getAttribute("data9");
    var data10 = markers[i].getAttribute("data10");

    var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
var ind = i;
var ind= ind + 1;
if(type == 'truck')
{
var html = "<b><a href='da.cfm?id="+id+"'>"+data1+"</a></b><br />"+"Order # <b>"+data2+" &nbsp;&nbsp;"+data3+"</b> <i>lbs</i><br />" + "<br/><br/>" + data5 + "<br />" + data6 + "<br/>" + data7 + "<br/>" + data8 +"<br />"+ data9;
var icon = "https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|"+icon+"|"+color+"|000000";
}
else if(type == 'track')
{
var html = "<b><a href='da1.cfm?id="+id+"'>"+data1+"</a></b><br />"+"<b>"+data3+"</b>&nbsp;MPH&nbsp;-&nbsp;Engine&nbsp;<b>"+data7+"</b><br /><br/>Last Read&nbsp;" + data4 + "<br />Stop Duration&nbsp;" + data5 + "<br/>Recent Movement&nbsp;" + data6 + "<br/>Location&nbsp;" + data8 +"&nbsp;&nbsp;"+ data9;
var icon = "https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bbT|"+icon+"|"+color+"|000000";
}

 var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon,
    title: data1,
        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() {}

// This function picks up the click and opens the corresponding info window
  function myclick(i) {
    gmarkers[i].openInfoWindowHtml(htmls[i]);
  }

Answer 1

您需要对代码进行模块化 - 具有绘制地图的功能，加载数据的功能，初始绘制标记的功能（以及填充全局标记数组）和更新标记位置的功能。最终，您希望将所有标记对象存储在数组中。稍后当您想要更新标记的位置（不必清除标记或重新初始化地图）时，可以使用数组作为参考。

    //your global marker array for storing marker objects
    var globalMarkers;

    function init() {
    //initialise your map

//draw the initial set of markers
drawMarkers();
    }
    function loadData() {
    //define return array
    var data = [];

    //load your data here
    //loop through data as you do 

    //store marker points
    data[i].point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));

    //add other data if you wish

    //return a simple array of marker data - do not add them to the map yet
    return data;
    }

    function drawMarkers() {
    var markers = loadData();
    for (var i=0;i<markers.length;i++) {

     var marker = new google.maps.Marker({
            map: map,
            position: markers[i].point,
            icon: icon,
        title: data1,
            shadow: icon.shadow
          });
    }
    //save your marker in a global array for updating later
    globalMarkers.push(marker);
    }

    //this function updates position of markers with new data - you will be calling this one on a timer
    function updateMarkers() {
//load new data
data = loadData();
    //loop through array of marker objects and update their position with new data
    for (var i=0;i<globalMarkers.length;i++) {
    globalMarkers[i].setPosition(data[i].point);
    }

    }

应该执行此代码的顺序在文档上加载init（）地图，后来只调用计时器上的updateMarkers。

谷歌地图api ajax重装标记

1 个答案: