gpt4 book ai didi

javascript - 在 Leaflet 中创建自定义图层控件

转载 作者:行者123 更新时间:2023-11-29 18:28:05 26 4
gpt4 key购买 nike

我一直在制作带有许多静态图层的传单 map ,这些图层可以使用传单的标准图层控件关闭和打开。

最近,我一直在尝试使用 onclick 方法运行函数,以便在用户单击(当前为静态的)图例中的其中一张图像时在 map 上添加和删除图层。我已经尝试了很多不同的方法来让它工作,我认为它与 javascript 和网页元素的加载顺序有关(但我在这方面很新,所以我可能是错的)。

无论如何,没有粘贴太多我的代码 - 我将所有脚本加载到文档的头部:

<html>
<head>
<title>St. Louis River Estuary Deep Map</title>
<link rel="stylesheet" href="css/leaflet.css" />

<!--[if lte IE 8]>
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" />
<![endif]-->
<script type="text/javascript" src="js/leafletcopy.js"></script>
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script type= "text/javascript" src="js/googlemaps.js"></script>


<script type="text/javascript"src='js/wax.leaf.min.js'></script>

<script type='text/javascript' src='js/htmlswitch.js'></script>
<link rel='stylesheet' href='css/webmapstylesheet1.css'/>
<!--[if lte IE 8]>
<link rel="stylesheet" href="leaflet.ie.css" />
<![endif]-->

<script type="text/javascript" src="js/hearding.js"></script>
<script type="text/javascript" src="js/boundaries.js"></script>
<script type="text/javascript" src="js/bath1.js"></script>
<script type="text/javascript" src="js/bath2.js"></script>
<script type="text/javascript" src="js/bath3.js"></script>
<script type="text/javascript" src="js/monitoring.js"></script>
函数 removeRecreation() { map.removeLayer(recreationLayer); }; window.onload = 函数 () { //创建全局 map 变量 变量映射; 变种娱乐层;我想我只是不确定要全局定义哪个变量才能使 removeRecreation 函数在我从它所附加的图像上单击时调用该函数时有效地运行。如下代码所示:可以在以下位置找到实时版本:https://mywebspace.wisc.edu/axler/SLRE_Deep_Map/index2.html
</head>

<body>
<div id ="divHeader">
<h1>St. Louis River Deep Map</h1>
<div class="navHome"><a href="http://stlre.pebbleonline.com/">return home</a></div>
</div>


<div id="legend">
<h2>Legend:</h2>
<hr>

<p class ="legend"><img onclick = "removeRecreation();" src ="images/recreation1.png">Exploring</p>`

最佳答案

当您执行“var map”时,您实际上是在声明一个局部变量(相对于您传递给 window.onload 的函数),因此 removeRecreation 函数看不到它。要解决此问题,只需将“var map”移动到顶部(在 removeRecreation 定义之前)。

关于javascript - 在 Leaflet 中创建自定义图层控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11108499/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com