Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/384.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何删除由Google Maps信息窗口创建的空div(关闭地图上的信息窗口,打开新窗口时也单击关闭旧信息窗口)_Javascript_Google Maps_Google Maps Api 3 - Fatal编程技术网

Javascript 如何删除由Google Maps信息窗口创建的空div(关闭地图上的信息窗口,打开新窗口时也单击关闭旧信息窗口)

Javascript 如何删除由Google Maps信息窗口创建的空div(关闭地图上的信息窗口,打开新窗口时也单击关闭旧信息窗口),javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,出于某种原因,谷歌正在谷歌地图信息窗口卡中呈现一个空div。我遵循常规做法,通过initMap()启动Google地图,并添加我正在使用的infoWindow: if (props.content) { var infoWindow = new google.maps.InfoWindow({ content: props.content }); marker.addListener('click', function() { infoWindow.open(ma

出于某种原因,谷歌正在谷歌地图信息窗口卡中呈现一个空div。我遵循常规做法,通过initMap()启动Google地图,并添加我正在使用的infoWindow:

if (props.content) {

  var infoWindow = new google.maps.InfoWindow({
    content: props.content
  });

  marker.addListener('click', function() {
    infoWindow.open(map, marker);
  });
}
如何删除此分区?或者将我的内容放在div中


要在javascript中删除
div
,只需使用
remove()
函数,使用点符号即可

就这样,

document.getElementById(“元素”).remove();
但是,由于在所需的DOM项中没有特殊的id或类,因此不能作为解决方案。因此,您必须获取父节点并删除其子节点。您只需使用
removeChild(/*element.lastChild*/)
。所以会是这样的:

const-element=document.querySelector('.gm-style-iw-d');
element.removeChild(element.lastChild);

使现代化 如果要禁用其他
div
中的上下文菜单,使它们看起来相同,有两种方法

首先,您可以通过如下方式操纵HTML本身来实现这一点:


或者通过在初始加载后操作DOM:

HTML


Javascript

document.getElementById('elementId').addEventListener('contextmenu',function(){
返回false;
});
更新2 这不是实现所需的最佳方法,但您可以这样做,以便在用户单击地图中除标记和对话框本身以外的任何位置时关闭对话框。根据,您可以使用
.close()
方法关闭
信息窗口
,如下所示:

功能添加标记(道具){
var marker=new google.maps.marker({
位置:道具,坐标,
地图:地图,
});
//检查自定义图标
如果(道具图像){
//设置图标图像
marker.setIcon(props.iconImage);
}
//检查内容
如果(道具内容){
var infoWindow=new google.maps.infoWindow({
内容:道具内容
});
marker.addListener('click',function()){
信息窗口。打开(地图、标记);
设置超时(()=>{
var x=document.getElementsByClassName('gm-ui-hover-effect')[0]。删除();
}, 1);
});
}
google.maps.event.addListener(映射,“单击”,函数(事件){
infoWindow.close();
});
}
更新3 要关闭旧的
信息窗口
,您应该创建一个唯一的
信息窗口
,并将其内容更新为在每个
标记上只关闭/打开一个。单击
。因此,通过这种方式,它将像一个魅力

var infoWindow=null;
//添加标记函数
功能添加标记(道具){
var marker=new google.maps.marker({
位置:道具,坐标,
地图:地图,
//图标:'./img/marker1.png'
});
//检查自定义图标
如果(道具图像){
//设置图标图像
marker.setIcon(props.iconImage);
}
//检查内容
如果(道具内容){
google.maps.event.addListener(标记'click',函数(){
如果(信息窗口){
infoWindow.close();
}
infoWindow=新建google.maps.infoWindow({
内容:道具内容
});
信息窗口。打开(地图、标记);
设置超时(()=>{
var x=document.getElementsByClassName('gm-ui-hover-effect')[0]。删除();
}, 10);
});
}
google.maps.event.addListener(映射,“单击”,函数(事件){
infoWindow.close();
});
}

下面是工作演示的链接:

为什么要删除这样一个
div
?什么是
道具.content
?在InfoWindow内容正常工作时传递HTMLElement:@SMAKSS我想在该div中输入内容或将其删除。因为该div已禁用右键单击,并且在“我的div”上可以右键单击。因此,它不能提供良好的体验。我想禁用右键单击,因此我想在此div中输入内容或将其完全删除。@geocodezip props.content的目的是检查内容。我询问了
props.content
,以便我可以设置一个演示您的问题的示例。但如果你那样做会更好。右键单击问题是另一个问题(请不要在评论中扩展您的问题,评论是为了澄清现有问题,而不是提出其他问题,无论您觉得这些问题有多相关)。评论不用于扩展讨论;这段对话已经结束。