Question

我正在开发一个小宠物项目，通过绘制多边形来编辑个人地图，并且发现当我调用map.data.remove（feature）时，该功能将从map.data中删除，但不会从视觉地图。一些与数据层无关的javascript已被省略。我还需要执行哪些额外的步骤，删除或函数调用才能从地图中删除该功能？

...
function CustomMapType() {
}
CustomMapType.prototype.tileSize = new google.maps.Size(256,256);
CustomMapType.prototype.maxZoom = 7;
CustomMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
    var div = ownerDocument.createElement('DIV');
    var baseURL = 'static/tiles/images/';
    var x = ((coord.x % Math.pow(2, zoom))
        + Math.pow(2, zoom)) % Math.pow(2, zoom);
    baseURL += zoom + '_' + x + '_' + coord.y + '.png';
    div.style.width = this.tileSize.width + 'px';
    div.style.height = this.tileSize.height + 'px';
    div.style.backgroundColor = '#1B2D33';
    div.style.backgroundImage = 'url(' + baseURL + ')';
    return div;
};

CustomMapType.prototype.name = "Custom";
CustomMapType.prototype.alt = "Tile Coordinate Map Type";

var map;
var CustomMapType = new CustomMapType();


//////////     Initializer Functions     //////////

function initialize() {
  var styledMapOptions = { name: "Custom Style" };
  var mapOptions = getMapOptions();
  var data = getDataObject();

  data.addListener("click", function(event) {
    fillFormFromFeature(event.feature);
  });

  data.setStyle(function(feature) {
    var style = featureStyles[feature.getProperty('style')];
    return style
  });


  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  data.setMap(map);

  map.mapTypes.set('custom',CustomMapType);
  map.setMapTypeId('custom');
  map.mapTypes.set(MY_MAPTYPE_ID);
}

function getMapOptions() {
  return {
    minZoom: 0,
    maxZoom: 7,
    isPng: true,
    mapTypeControl: false,
    mapMaker: true,
    streetViewControl: false,
    center: new google.maps.LatLng(65.07,-56.08),
    zoom: 3,
    mapTypeControlOptions: {
      mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
  };
}

function getDataObject() {
  return new google.maps.Data({
    controlPosition: google.maps.ControlPosition.TOP_CENTER,
    controls: ["Point", "Polygon"],
    featureFactory: function(featureGeometry) {
      var date = new Date();
      // TODO add code here for forming polygons.
      var feature = new google.maps.Data.Feature({
        geometry: featureGeometry,
        id: date.getTime(),
        properties: {
          'name': 'none',
          'style': 'new',
          'feature_type': 'new',
          'zIndex': '5000',
        }
      });

      document.forms["feature_form"]["feature_id"].value = feature.getId();

      map.data.add(feature);
      map.data.revertStyle();
      return feature;
    }
  });
}


...

Answer 1

您的代码使用了2个不同的google.maps.Data - 实例。

getDataObject()
内置data - Map - 实例

创建多边形（或其他要素）时

此功能将由featureFactory自动添加到getDataObject()
map.data.add(feature);的来电也将此功能添加到map.data

结果：您有两个重复的功能，当您致电map.data.remove时，您只删除了map.data的功能。

解决方案：您不需要自行添加该功能，它会自动添加。但它不是map.data的功能，它是getDataObject返回的数据实例的一项功能，因此您必须调用此remove的{{1}} 1}} - 实例：

＆＃13;

Data

＆＃13;

function initialize() {
  var mapOptions = getMapOptions();
  var data = getDataObject();

  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  data.setMap(map);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementsByTagName('UL')[0]);


}

function getMapOptions() {
  return {
    minZoom: 0,
    maxZoom: 7,
    isPng: true,
    mapTypeControl: false,
    mapMaker: true,
    disableDefaultUI: true,
    center: new google.maps.LatLng(65.07, -56.08),
    zoom: 3
  };
}

function getDataObject() {
  //create a variable to be able to access it from within
  //the featureFactory
  var Data = new google.maps.Data({
    controlPosition: google.maps.ControlPosition.TOP_CENTER,
    controls: ["Point", "Polygon"],
    featureFactory: function(featureGeometry) {

      var date = new Date();
      // TODO add code here for forming polygons.
      var feature = new google.maps.Data.Feature({
        geometry: featureGeometry,
        id: date.getTime(),
        properties: {
          'name': 'none',
          'style': 'new',
          'feature_type': 'new',
          'zIndex': '5000',
        }
      });

      var listItem = document.createElement('li');
      listItem.textContent = [featureGeometry.getType(), feature.getId()].join(' ');
      document.getElementsByTagName('UL')[0].appendChild(listItem);
      google.maps.event.addDomListener(listItem, 'click', function() {
        //remove the feature
        Data.remove(feature);
          //remove the listItem
        this.parentNode.removeChild(this)
      });

      map.data.revertStyle();
      return feature;
    }
  });
  return Data;
}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  margin: 0;
  padding: 0
}
ul {
  background: #fff;
}
li {
  padding-right: 12px;list-style-image:url(http://upload.wikimedia.org/wikipedia/commons/5/54/Delete-silk.png);
  cursor: pointer
}

＆＃13;

Answer 2

要从地图中删除多边形，您必须设置：

 yourPolygon.setMap(null);

ps：代码中的次要部分显示两次getDataObject函数

谷歌地图Javascript Api V3 data.remove没有删除功能

2 个答案: