Question

我一直在制作一张传单地图，其中包含许多静态图层，可以使用传单的标准图层控件关闭和打开。

最近，当用户点击（当前是静态的）图例中的一个图像时，我一直在尝试使用onclick方法运行函数来添加和删除地图中的图层。我已经尝试了许多不同的方法来实现这一点，我认为它与javascript和网页元素的加载顺序有关（但我很新，所以我可能是错的）。< / p>

无论如何，没有粘贴太多的代码 - 我正在加载文档头部的所有脚本：

<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>

  function removeRecreation() {
                map.removeLayer(recreationLayer);
             };


 window.onload = function () {

     //create global map variable

     var map;
     var recreationLayer;

我想我只是不确定要全局定义哪个变量，以便在我从附加到的图像上调用点击函数时使removeRecreation函数有效地运行。如下面的代码所示：

可在以下网址找到实时版本：

https://mywebspace.wisc.edu/axler/SLRE_Deep_Map/index2.html

 </script>
</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>`

提前致谢！

Answer 1

当你在做“var map”时，你实际上是在声明一个局部变量（相对于你传递给window.onload的函数），所以removeRecreation函数看不到它。要解决此问题，只需将“var map”移到顶部（在removeRecreation定义之前）。

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

1 个答案: