在google map api v3中过滤图标标记时遇到问题
在google map api v3中过滤图标标记时遇到问题
提问于 2018-06-29 06:49:49
我正在尝试根据选定的风向过滤谷歌地图上的图标。在这个简单的示例中，我总共有两个标记(Bowers和list )，用户将从下拉选择列表中选择一个风向，如果选择了北风向，则两个发射之一(Bowers)将被过滤掉。我在代码的末尾构建了filterFunction，虽然它正确地读取了所选的风向并显示了警报，但它不会像我预期的那样使鲍尔斯标记消失。此外，如果我切换警报和设置的可见代码行，则根本不会出现警报语句，这可能是因为程序挂起了setVisible语句。
请告诉我怎样才能让我的过滤器工作。
谢谢。
代码为：`
<!DOCTYPE html>
<html>
<body>
<select id="windDir" type="text" onchange="filterFunction()">
<option value="all">any all</option>
<option value="North">N</option>
<option value="Northeast">NE</option>
<option value="East">E</option>
<option value="Southeast">SE</option>
<option value="South">S</option>
<option value="Southwest">SW</option>
<option value="West">W</option>
<option value="Northwest">NW</option>
</select>
<h1>Delmarva Windsurf Launches</h1>
<div id="googleMap" style="width:65%;height:1300px;"></div>
<script>
function myMap() {
var posSlaughter = {lat: 38.914, lng: -75.304};
var posBowers = {lat: 39.062, lng: -75.397};
var mapProp= {
center:new google.maps.LatLng(38.1742, -75.520850),
zoom:9,
mapTypeId: google.maps.MapTypeId.HYBRID,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var markerSlaughter = new google.maps.Marker({
position: posSlaughter,
label: {
color: 'pink',
fontWeight: 'bold',
text: "Slaughter Beach",
},
icon: {
url: 'windsurfing5a.png',
labelOrigin: new google.maps.Point(85, 15),
origin: new google.maps.Point(0, 0),
},
map: map,
}
);
google.maps.event.addListener(markerSlaughter, 'click', function() {
window.open("http://windsurfresource.com/slaughter.htm");
});
var markerBowers = new google.maps.Marker({
position: posBowers,
label: {
color: 'pink',
fontWeight: 'bold',
text: "Bowers Beach",
},
icon: {
url: 'windsurfing5a.png',
labelOrigin: new google.maps.Point(80, 15),
origin: new google.maps.Point(0, 0),
},
map: map,
}
);
google.maps.event.addListener(markerBowers, 'click', function() {
window.open("http://windsurfresource.com/bowers.htm");
});
}
function filterFunction() {
var x = document.getElementById("windDir").value;
if (x == "North") {
alert("north is selected");
markerBowers.setVisible(false);
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=
KEY STRICKEN OUT HERE"></script>
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
-->
</body>
</html>回答 1
Stack Overflow用户
发布于 2018-06-30 03:08:34
在使用浏览器控制台(contrl shift-j)时，它表示变量markerBowers在map函数外部未定义。因此，我在map函数之外定义了它，而不是在其中，这样它就是全局的，并且可以看到，一切都像我想要的那样工作，当北风被选中时，Bowers标记就消失了。因此，我希望取消这个问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51092140
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号