menu - 可能的侧边栏点击事件冲突
问题描述
问题
我正在尝试添加一个折叠侧边栏,当单击汉堡包时它会滑动打开。当我删除用于收集标记的 GPS 坐标的表格时,该菜单有效
<form action="">
<input type="hidden" name="lat" id="lat">
<input type="hidden" name="lng" id="lng">
但是当我将代码添加回页面时,侧边栏不会展开。我相信存在点击事件冲突,因为当我点击汉堡时,地图似乎会重新加载,但我无法找到问题所在。我在开发工具中没有收到任何错误。
我尝试按预期删除表单编码和侧边栏功能,所以这让我相信存在点击事件冲突。
问题
当表单存在时,什么会导致汉堡点击启动地图刷新?
我的 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);
});
解决方案
就我而言,简单的语法错误。现在工作得很好。
推荐阅读
- javascript - Highcharts:使用 jspdf 导出多个图表
- rust - 如何在 Rust 中使用 serde 为容器“反序列化”
- python - 如何从 Countvectorizer token_pattern 中保留 #hashtag 和 @mention 特征
- java - Hibernate Query Language (HQL) QueryException: could not resolve property: Transactions of: classes.Advicenote,我该如何解决这个问题?我很困惑
- c++ - 对象如何获得指向它所属的类对象的指针 c++
- .net-core - ASP.NET Core MVC 项目无法加载程序集
- python - 拆分韩文和数字
- php - 如何在 Woocommerce 中仅获取可用性变化计数
- javascript - 是否可以在不知道父键的情况下解构嵌套对象?
- php - 如何在 CodeIgniter 中进行基于角色的访问控制?