Google Maps Javascript Api V3 data.remove-isn';t删除特征
我正在做一个小宠物项目,通过绘制多边形来编辑个人地图,我发现当我调用map.data.remove(功能)时,该功能会从map.data中删除,但不会从可视地图中删除。省略了一些与数据层无关的javascript。我还需要哪些额外的步骤、删除或函数调用才能从映射中实际删除该功能Google Maps Javascript Api V3 data.remove-isn';t删除特征,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我正在做一个小宠物项目,通过绘制多边形来编辑个人地图,我发现当我调用map.data.remove(功能)时,该功能会从map.data中删除,但不会从可视地图中删除。省略了一些与数据层无关的javascript。我还需要哪些额外的步骤、删除或函数调用才能从映射中实际删除该功能 ... function CustomMapType() { } CustomMapType.prototype.tileSize = new google.maps.Size(256,256); CustomMapTy
...
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;
}
});
}
...
要从地图中删除多边形,必须设置:
yourPolygon.setMap(null);
ps:代码中的一个次要部分是两次显示
getDataObject
函数您的代码使用了两个不同的google.maps.Data
-实例
getDataObject()返回的实例
映射
-实例的内置数据
-属性featureFactory
自动添加到getDataObject()返回的实例中
map.data.add(feature)代码>还将该功能添加到地图数据中
map.data.remove
时,您有两个重复的功能,您只删除map.data
的功能
解决方案:您无需自行添加该功能,它将自动添加。但它不是map.data
的功能,而是getDataObject
返回的数据实例的功能,因此您必须调用此数据的remove
方法-实例:
函数初始化(){
var mapOptions=getMapOptions();
var data=getDataObject();
map=new google.maps.map(document.getElementById(“map_canvas”),mapOptions);
data.setMap(map);
控件[google.maps.ControlPosition.TOP_LEFT].push(document.getElementsByTagName('UL')[0]);
}
函数getMapOptions(){
返回{
最小缩放:0,
最大缩放:7,
是的,
mapTypeControl:false,
地图绘制者:没错,
disableDefaultUI:true,
中心:新google.maps.LatLng(65.07,-56.08),
缩放:3
};
}
函数getDataObject(){
//创建一个变量,以便能够从内部访问它
//特色工厂
var Data=新的google.maps.Data({
controlPosition:google.maps.controlPosition.TOP_CENTER,
控件:[“点”、“多边形”],
featureFactory:功能(featureGeometry){
变量日期=新日期();
//TODO在此处添加用于形成多边形的代码。
var feature=new google.maps.Data.feature({
几何:特征几何,
id:date.getTime(),
特性:{
“名称”:“无”,
'样式':'新',
“功能类型”:“新建”,
“zIndex”:“5000”,
}
});
var listItem=document.createElement('li');
listItem.textContent=[featureGeometry.getType(),feature.getId()]。连接(“”);
document.getElementsByTagName('UL')[0].appendChild(listItem);
google.maps.event.addDomListener(listItem,'click',function(){
//删除该功能
数据删除(特征);
//删除列表项
this.parentNode.removeChild(this)
});
map.data.revertStyle();
返回特性;
}
});
返回数据;
}
google.maps.event.addDomListener(窗口“加载”,初始化)代码>
html,
身体,
#地图画布{
身高:100%;
保证金:0;
填充:0
}
保险商实验室{
背景:#fff;
}
李{
右边填充:12px;列表样式图像:url(http://upload.wikimedia.org/wikipedia/commons/5/54/Delete-silk.png);
光标:指针
}
很抱歉,为了清晰起见,我编辑了这篇文章。我使用的是要素而不是多边形,要素没有“setMap”方法。您在代码中的何处调用数据。删除?您能帮我解决这个问题吗