Question

我正在创建一个包含多个标记的跟踪应用程序。我还添加了基于google's arrow example的矢量线。除了一个功能，它工作正常。当我从数据库更新位置时，它会根据车辆删除旧标记并更新位置和标记。问题是无论我尝试什么我都无法删除旧的向量（line和lineSymbol）。我尝试了setmap null，空路径，删除，删除但不知何故它不起作用。有什么想法吗？

    var locations = {}; //A repository for markers (and the data from which they were contructed).

//initial dataset for markers
var locs = {
  1: {
    info: '11111. Some random info here',
    lat: -37.8139,
    lng: 144.9634
  },
  2: {
    info: '22222. Some random info here',
    lat: 46.0553,
    lng: 14.5144
  },
  3: {
    info: '33333. Some random info here',
    lat: -33.7333,
    lng: 151.0833
  },
  4: {
    info: '44444. Some random info here',
    lat: 27.9798,
    lng: -81.731
  }
};
var map = new google.maps.Map(document.getElementById('map_2385853'), {
  zoom: 1,
  maxZoom: 8,
  minZoom: 1,
  streetViewControl: false,
  center: new google.maps.LatLng(40, 0),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();

var auto_remove = true; //When true, markers for all unreported locs will be removed.

function setMarkers(locObj) {
  if (auto_remove) {
    //Remove markers for all unreported locs, and the corrsponding locations entry.
    $.each(locations, function(key) {
      if (!locObj[key]) {
        if (locations[key].marker) {
          locations[key].marker.setMap(null);
        }
        delete locations[key];
      }
    });
  }

  $.each(locObj, function(key, loc) {
    if (!locations[key] && loc.lat !== undefined && loc.lng !== undefined) {
      //Marker has not yet been made (and there's enough data to create one).
      var line = new google.maps.Polyline({
        path: [{
          lat: loc.lat,
          lng: loc.lng
        }, {
          lat: 41.0553,
          lng: 24.17
        }],
        map: map,
      });
      line.setMap(map);
      //Create marker
      loc.marker = new google.maps.Marker({
        position: new google.maps.LatLng(loc.lat, loc.lng),
        map: map
      });

      //Attach click listener to marker
      google.maps.event.addListener(loc.marker, 'click', (function(key) {
        return function() {
          if (locations[key]) {
            infowindow.setContent(locations[key].info);
            infowindow.open(map, locations[key].marker);
          }
        }
      })(key));

      //Remember loc in the `locations` so its info can be displayed and so its marker can be deleted.
      locations[key] = loc;
    } else if (locations[key] && loc.remove) {
      //Remove marker from map
      if (locations[key].marker) {
        locations[key].marker.setMap(null);
      }
      //Remove element from `locations`
      delete locations[key];
    } else if (locations[key]) {
      //Update the previous data object with the latest data.
      $.extend(locations[key], loc);
      if (loc.lat !== undefined && loc.lng !== undefined) {
        //Update marker position (maybe not necessary but doesn't hurt).
        locations[key].marker.setPosition(
          new google.maps.LatLng(loc.lat, loc.lng)
        );
      }
      var line = new google.maps.Polyline({
        path: [{
          lat: loc.lat,
          lng: loc.lng
        }, {
          lat: 41.0553,
          lng: 24.17
        }],
        map: map,
      });
      line.setMap(map);
      //locations[key].info looks after itself.
    }
  });
}

var ajaxObj = { //Object to save cluttering the namespace.
  options: {
    url: "........", //The resource that delivers loc data.
    dataType: "json" //The type of data tp be returned by the server.
  },
  delay: 10000, //(milliseconds) the interval between successive gets.
  errorCount: 0, //running total of ajax errors.
  errorThreshold: 5, //the number of ajax errors beyond which the get cycle should cease.
  ticker: null, //setTimeout reference - allows the get cycle to be cancelled with clearTimeout(ajaxObj.ticker);
  get: function() { //a function which initiates 
    if (ajaxObj.errorCount < ajaxObj.errorThreshold) {
      ajaxObj.ticker = setTimeout(getMarkerData, ajaxObj.delay);
    }
  },
  fail: function(jqXHR, textStatus, errorThrown) {
    console.log(errorThrown);
    ajaxObj.errorCount++;
  }
};

//Ajax master routine
function getMarkerData() {
  $.ajax(ajaxObj.options)
    .done(setMarkers) //fires when ajax returns successfully
    .fail(ajaxObj.fail) //fires when an ajax error occurs
    .always(ajaxObj.get); //fires after ajax success or ajax error
}

setMarkers(locs); //Create markers from the initial dataset served with the document.
//ajaxObj.get();//Start the get cycle.

// *******************
//test: simulated ajax
var testLocs = {
  1: {
    info: '1. New Random info and new position',
    lat: 0,
    lng: 144.9634
  }, //update info and position
  2: {
    lat: 0,
    lng: 14.5144
  }, //update position
  3: {
    info: '3. New Random info'
  }, //update info
  5: {
    info: '55555. Added',
    lat: 0,
    lng: 60
  } //add new marker
};
setTimeout(function() {
  setMarkers(testLocs);
}, ajaxObj.delay);
// *******************

Answer 1

保持对该行（以及标记）的引用。隐藏标记时隐藏该行。

function setMarkers(locObj) {
  if (auto_remove) {
    //Remove markers for all unreported locs, and the corrsponding locations entry.
    $.each(locations, function(key) {
      if (!locObj[key]) {
        if (locations[key].marker) {
          locations[key].marker.setMap(null);
        }
        if (locations[key].line) {
          locations[key].line.setMap(null);
        }
        delete locations[key];
      }
    });
  }

  $.each(locObj, function(key, loc) {
    if (!locations[key] && loc.lat !== undefined && loc.lng !== undefined) {
      //Marker has not yet been made (and there's enough data to create one).
      // create the line for it as well
      loc.line = new google.maps.Polyline({
        path: [{
          lat: loc.lat,
          lng: loc.lng
        }, {
          lat: 41.0553,
          lng: 24.17
        }],
        map: map
      });
      //Create marker
      loc.marker = new google.maps.Marker({
        position: new google.maps.LatLng(loc.lat, loc.lng),
        map: map,
        title: key
      });

      //Attach click listener to marker
      google.maps.event.addListener(loc.marker, 'click', (function(key) {
        return function() {
          if (locations[key]) {
            infowindow.setContent(locations[key].info);
            infowindow.open(map, locations[key].marker);
          }
        }
      })(key));

      //Remember loc in the `locations` so its info can be displayed and so its marker can be deleted.
      locations[key] = loc;
    } else if (locations[key] && loc.remove) {
      //Remove marker from map
      if (locations[key].marker) {
        locations[key].marker.setMap(null);
      }
      //Remove the line from the map
      if (locations[key].line) {
        locations[key].line.setMap(null);
      }
      //Remove element from `locations`
      delete locations[key];
    } else if (locations[key]) {
      //Update the previous data object with the latest data.
      $.extend(locations[key], loc);
      if (loc.lat !== undefined && loc.lng !== undefined) {
        //Update marker position (maybe not necessary but doesn't hurt).
        locations[key].marker.setPosition(
          new google.maps.LatLng(loc.lat, loc.lng)
        );
      }
      if (locations[key].line && locations[key].line.setMap) {
        // if existing line, update its path
        locations[key].line.setPath([{
          lat: loc.lat,
          lng: loc.lng
        }, {
          lat: 41.0553,
          lng: 24.17
        }]);
      }
    }
  });
}

proof of concept fiddle

代码段

＆＃13;

$(document).ready(function() {
  var locations = {}; //A repository for markers (and the data from which they were contructed).

  //initial dataset for markers
  var locs = {
    1: {
      info: '11111. Some random info here',
      lat: -37.8139,
      lng: 144.9634
    },
    2: {
      info: '22222. Some random info here',
      lat: 46.0553,
      lng: 14.5144
    },
    3: {
      info: '33333. Some random info here',
      lat: -33.7333,
      lng: 151.0833
    },
    4: {
      info: '44444. Some random info here',
      lat: 27.9798,
      lng: -81.731
    }
  };

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 1,
    maxZoom: 8,
    minZoom: 1,
    streetViewControl: false,
    center: new google.maps.LatLng(40, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var infowindow = new google.maps.InfoWindow();

  var auto_remove = true; //When true, markers for all unreported locs will be removed.

  function setMarkers(locObj) {
    if (auto_remove) {
      //Remove markers for all unreported locs, and the corrsponding locations entry.
      $.each(locations, function(key) {
        if (!locObj[key]) {
          if (locations[key].marker) {
            locations[key].marker.setMap(null);
          }
          if (locations[key].line) {
            locations[key].line.setMap(null);
          }
          delete locations[key];
        }
      });
    }

    $.each(locObj, function(key, loc) {
      if (!locations[key] && loc.lat !== undefined && loc.lng !== undefined) {
        //Marker has not yet been made (and there's enough data to create one).
        loc.line = new google.maps.Polyline({
          path: [{
            lat: loc.lat,
            lng: loc.lng
          }, {
            lat: 41.0553,
            lng: 24.17
          }],
          map: map,
        });
        //Create marker
        loc.marker = new google.maps.Marker({
          position: new google.maps.LatLng(loc.lat, loc.lng),
          map: map,
          title: key
        });

        //Attach click listener to marker
        google.maps.event.addListener(loc.marker, 'click', (function(key) {
          return function() {
            if (locations[key]) {
              infowindow.setContent(locations[key].info);
              infowindow.open(map, locations[key].marker);
            }
          }
        })(key));

        //Remember loc in the `locations` so its info can be displayed and so its marker can be deleted.
        locations[key] = loc;
      } else if (locations[key] && loc.remove) {
        //Remove marker from map
        if (locations[key].marker) {
          locations[key].marker.setMap(null);
        }
        if (locations[key].line) {
          locations[key].line.setMap(null);
        }
        //Remove element from `locations`
        delete locations[key];
      } else if (locations[key]) {
        //Update the previous data object with the latest data.
        $.extend(locations[key], loc);
        if (loc.lat !== undefined && loc.lng !== undefined) {
          //Update marker position (maybe not necessary but doesn't hurt).
          locations[key].marker.setPosition(
            new google.maps.LatLng(loc.lat, loc.lng)
          );
        }
        if (locations[key].line && locations[key].line.setMap) {
          // if existing line, update its path
          locations[key].line.setPath([{
            lat: loc.lat,
            lng: loc.lng
          }, {
            lat: 41.0553,
            lng: 24.17
          }]);
        }
      }
    });
  }

  var ajaxObj = { //Object to save cluttering the namespace.
    options: {
      url: "........", //The resource that delivers loc data.
      dataType: "json" //The type of data tp be returned by the server.
    },
    delay: 10000, //(milliseconds) the interval between successive gets.
    errorCount: 0, //running total of ajax errors.
    errorThreshold: 5, //the number of ajax errors beyond which the get cycle should cease.
    ticker: null, //setTimeout reference - allows the get cycle to be cancelled with clearTimeout(ajaxObj.ticker);
    get: function() { //a function which initiates 
      if (ajaxObj.errorCount < ajaxObj.errorThreshold) {
        ajaxObj.ticker = setTimeout(getMarkerData, ajaxObj.delay);
      }
    },
    fail: function(jqXHR, textStatus, errorThrown) {
      console.log(errorThrown);
      ajaxObj.errorCount++;
    }
  };

  //Ajax master routine
  function getMarkerData() {
    $.ajax(ajaxObj.options)
      .done(setMarkers) //fires when ajax returns successfully
      .fail(ajaxObj.fail) //fires when an ajax error occurs
      .always(ajaxObj.get); //fires after ajax success or ajax error
  }

  setMarkers(locs); //Create markers from the initial dataset served with the document.
  //ajaxObj.get();//Start the get cycle.

  // *******************
  //test: simulated ajax
  var testLocs = {
    1: {
      info: '1. New Random info and new position',
      lat: 0,
      lng: 144.9634
    }, //update info and position
    2: {
      lat: 0,
      lng: 14.5144
    }, //update position
    3: {
      info: '3. New Random info',
      lat: 45,
      lng: -117
    }, //update info
    5: {
      info: '55555. Added',
      lat: 0,
      lng: 60
    } //add new marker
  };
  setTimeout(function() {
    setMarkers(testLocs);
  }, ajaxObj.delay);
  // *******************
});

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

＆＃13;

从谷歌地图中删除和更新箭头和矢量（从数据库更新）

1 个答案: