可能侧边栏点击事件冲突

Question

问题

我正在尝试添加一个可折叠的侧边栏，它会在单击汉堡包时滑动打开。当我删除用于收集标记

的 GPS 坐标的表单时，菜单会起作用

<form action=""> <input type="hidden" name="lat" id="lat"> <input type="hidden" name="lng" id="lng">

但是当我将代码添加回页面时，边栏没有展开。我认为存在点击事件冲突，因为当我点击汉堡包时，地图似乎重新加载但我无法找到问题所在。我在开发工具中没有收到任何错误。

我尝试按预期删除表单编码和侧边栏功能，所以这让我相信存在点击事件冲突。

问题

当表单出现时，什么会导致汉堡点击启动地图刷新？

Working Page

我的 JS 片段

function openNav() {
document.getElementById("mySidepanel").style.width = "50%";
}

function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}

/* Map Functions */
var map = null;
var layers = [];
var infoBubble;
var content24hr = null;
var content48hr = null;
var content72hr = null;
var content96hr = null;
var content120hr = null;
var airtemp;


function displayMap() {
layers[0] = new google.maps.KmlLayer("https://www.ndbc.noaa.gov/kml/marineobs_by_owner.kml", {
preserveViewport: true
});
}


function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
].join(', ');
}

function toggleLayers(i) {
if (layers[i].getMap() == null) {
    layers[i].setMap(map);
} else {
    layers[i].setMap(null);
}
}


function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
].join(', ');
}

function init() {

/* How do we want to set a default location???? */
$("#lat").val(34.6444);
$("#lng").val(-73.580);

var latLng = new google.maps.LatLng($("#lat").val(), $("#lng").val());
var markerPosition = new google.maps.LatLng($("#lat").val(), $("#lng").val());
map = new google.maps.Map(document.getElementById('map'), {
  zoom: 5,
  center: latLng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
  disableDefaultUI: true,
    });

var icon = {
      url: 'https://static.wixstatic.com/media/e09925_8ec9d5e526f94859b5348b41e3daba74~mv2.png'
    };

    var marker = new google.maps.Marker({
      position: markerPosition,
      title: 'Weather Forecast',
      map: map,
      icon: icon,
      draggable: true
    });
    updateMarkerPosition(latLng);

    infoBubble = new InfoBubble({
    maxWidth: 350
          });

    createTabElements();

    //Set the info bubble items
    infoBubble.addTab('24 Hr', content24hr);
    infoBubble.addTab('48 Hr', content48hr);
    infoBubble.addTab('72 Hr', content72hr);
    infoBubble.addTab('96 Hr', content96hr);
    infoBubble.addTab('120 Hr', content120hr);

    google.maps.event.addListener(marker, 'click', function() {
      getWeatherForLocation($("#lat").val(), $("#lng").val(), marker);
      });

      google.maps.event.addListener(marker, 'drag', function() {
          //Have to close the bubble when we move so we can get new weather info when it stops
          infoBubble.close();
          updateMarkerPosition(marker.getPosition());
        });

      google.maps.event.addListener(marker, 'dragend', function() {

        var lat = marker.getPosition().lat();
        var lng = marker.getPosition().lng();

        $("#lat").val(lat);
        $("#lng").val(lng);

        //getWeatherForLocation($("#lat").val(), $("#lng").val(), marker);
      });

Answer 1

我犯了一个简单的语法错误。现在工作很好。

可能侧边栏点击事件冲突

Possible sidebar click event conflict

menu

sidebar

onclick