Javascript Google Maps自定义平铺层输入onclick将同一层添加两次

我用自定义输入控件在谷歌地图上添加了gebco瓷砖

看起来效果不错，但我注意到图层添加了两次。 我创建了一个显示，当您单击输入时，它会在控制台上添加两次gebco层

如果更好的话，我还添加了一个片段。所以我不明白为什么它会增加两倍的图层

有没有办法防止它添加两次gebco层

var map=new google.maps.map（document.getElementById（'map'）{
缩放：2，
最大缩放：8，
minZoom:1，
中心：{
纬度：0，
液化天然气：-0
},
disableDefaultUI:false，
动物控制：对，
mapTypeControl:false，
街景控制：错误，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
功能中心控制（controlDiv，地图）{
//Bulut自定义映射控件
var controlUI=document.createElement（'div'）；
controlUI.style.cursor='pointer'；
controlUI.style.textAlign='center'；
controlUI.title='请选择天气层'；
controlDiv.appendChild（controlUI）；
var controlText=document.createElement（'div'）；
controlText.innerHTML='风流'；
controlUI.appendChild（controlText）；
$（“div”）。在（“click”、“#otherlayers input[id='gebco']”上，函数（e）{
setgebcolayer（本）；
});
}
var gebcoLayer=
新的google.maps.ImageMapType(
{
getTileUrl:函数（坐标、缩放）{
var tilesPerGlobe=1JQuery正在两次运行click事件。单击时，下面的行会触发两次：

$("div").on("click", "#otherlayers input[id='gebco']", function (e) {   

JQuery正在两次运行click事件。下面的行在单击时触发两次：

$("div").on("click", "#otherlayers input[id='gebco']", function (e) {   

当您使用输入复选框时，收听
change
事件是更好的选择，如下所示。它有效

 $(document).on("change","input[id='gebco']",function(e){

          setgebcolayer(this);

          var layerArray = map.overlayMapTypes.getArray();
          console.log(layerArray);

  })


var map=new google.maps.map（document.getElementById（'map'）{
缩放：2，
最大缩放：8，
minZoom:1，
中心：{
纬度：0，
液化天然气：-0
},
disableDefaultUI:false，
动物控制：对，
mapTypeControl:false，
街景控制：错误，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
功能中心控制（controlDiv，地图）{
//Bulut自定义映射控件
var controlUI=document.createElement（'div'）；
controlUI.style.cursor='pointer'；
controlUI.style.textAlign='center'；
controlUI.title='请选择天气层'；
controlDiv.appendChild（controlUI）；
var controlText=document.createElement（'div'）；
controlText.innerHTML='风流'；
controlUI.appendChild（controlText）；
$（文档）.on（“更改”，“输入[id='gebco']”，函数（e）{
setgebcolayer（本）；
var layerArray=map.overlyMapTypes.getArray（）；
控制台日志（layerArray）；
})
}
var gebcoLayer=
新的google.maps.ImageMapType(
{
getTileUrl:函数（坐标、缩放）{
var tilesPerGlobe=1当您使用输入复选框时，听
change
事件是更好的选择，如下所示。它可以工作

 $(document).on("change","input[id='gebco']",function(e){

          setgebcolayer(this);

          var layerArray = map.overlayMapTypes.getArray();
          console.log(layerArray);

  })


var map=new google.maps.map（document.getElementById（'map'）{
缩放：2，
最大缩放：8，
minZoom:1，
中心：{
纬度：0，
液化天然气：-0
},
disableDefaultUI:false，
动物控制：对，
mapTypeControl:false，
街景控制：错误，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
功能中心控制（controlDiv，地图）{
//Bulut自定义映射控件
var controlUI=document.createElement（'div'）；
controlUI.style.cursor='pointer'；
controlUI.style.textAlign='center'；
controlUI.title='请选择天气层'；
controlDiv.appendChild（controlUI）；
var controlText=document.createElement（'div'）；
controlText.innerHTML='风流'；
controlUI.appendChild（controlText）；
$（文档）.on（“更改”，“输入[id='gebco']”，函数（e）{
setgebcolayer（本）；
var layerArray=map.overlyMapTypes.getArray（）；
控制台日志（layerArray）；
})
}
var gebcoLayer=
新的google.maps.ImageMapType(
{
getTileUrl:函数（坐标、缩放）{
var tilesPerGlobe=1这将解决您的问题：

$("div").on("click", "#otherlayers input[id='gebco']", function (e) {
        e.stopPropagation()
        setgebcolayer(this);
         var layerArray = map.overlayMapTypes.getArray();
            console.log(layerArray);
    });

您只需添加
e.stopPropagation（）

小提琴：这将解决您的问题：

$("div").on("click", "#otherlayers input[id='gebco']", function (e) {
        e.stopPropagation()
        setgebcolayer(this);
         var layerArray = map.overlayMapTypes.getArray();
            console.log(layerArray);
    });

您只需添加
e.stopPropagation（）

Fiddle:
谢谢你的回答。我也注意到了。我怎么能阻止它？谢谢你的回答。我也注意到了。我怎么能阻止它？@Bulut Kartal上面的回答完全解决了你的问题还是你需要进一步的帮助？@Bulut Kartal上面的回答完全解决了你的问题还是你需要进一步的帮助？