Question

当我添加或更新用户位置时，我有一个“实时” google地图，在地图上显示标记。添加/更新新用户的效果很好，它在地图上显示了新标记，但是如果我从数据库中删除条目，则标记不会从地图上消失。

如果您在我的代码中发现任何错误，或者可以帮助我对其进行修改，我将不胜感激。谢谢

  <script>
    window.onload = function() {
    var locations = {}; //A repository for markers (and the data from which they were contructed).

    //initial data set for markers
    var locs = {
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 9,
      maxZoom: 21,
      minZoom: 1,
      streetViewControl: false,
      center: new google.maps.LatLng(22.7533, 75.8937),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    function setMarkers(locObj) {
      $.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 marker
          loc.marker = new google.maps.Marker({
            position: new google.maps.LatLng(loc.lat, loc.lng),
            //icon: 'logo.png', //Marker icon).
            map: map
          });

          var infowindow = new google.maps.InfoWindow();
          infowindow.setContent('<span style="color:#EA2E49;font-weight:bold">'+loc.info+'</span>');
          infowindow.open(map, loc.marker);

          //Attach click listener to marker
          google.maps.event.addListener(loc.marker, 'click', (function (key) {
            return function () {
              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));
        }

        //locations[key].info looks after itself.
      }
    });
  }


  var ajaxObj = { //Object to save cluttering the namespace.
    options: {
      url: "test.php", //The resource that delivers loc data.
      dataType: "json" //The type of data tp be returned by the server.
    },
    delay: 500, //(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 data set served with the document.

  ajaxObj.get(); //Start the get cycle.
}
</script>

Answer 1

您可以使用此功能删除标记：

function removeMarkers(){
    for(i=0; i<gMarkersToRemove.length; i++){
        gMarkersToRemove[i].setMap(null);
    }
}

或者您可以直接隐藏它，这样就不必为他们的可见性重新加载地图：

gMarkersToRemove[i].setVisible(false);

或完全删除标记：

map.removeMarker(map.gMarkersToRemove[i]);

如果我从数据库中删除，如何从地图上删除标记

1 个答案: