2

私は、リーフレットの標準レイヤーコントロールを使用してオンとオフを切り替えることができるいくつかの静的レイヤーを備えたリーフレットマップに取り組んできました。

最近、onclickメソッドを使用して、ユーザーが（現在は静的な）凡例の画像の1つをクリックしたときに、マップにレイヤーを追加および削除する関数を実行しようとしています。これを機能させるためにさまざまな方法を試しましたが、JavaScriptとWebページ要素の読み込み順序に関係していると思います（ただし、これはかなり新しいので、間違っている可能性があります）。

とにかく、コードをあまり貼り付けずに、ドキュメントの先頭にあるすべてのスクリプトを次のようにロードしています。

<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 = function（）{//グローバルマップ変数を作成var map; var recreationLayer; アタッチされている画像からクリック時に関数を呼び出すときに、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>`
4

1 に答える 1

5

「varmap」を実行しているときは、実際にはローカル変数を宣言しているため（window.onloadに渡す関数に対して）、removeRecreation関数はそれを認識しません。これを修正するには、「var map」を一番上に移動します（removeRecreation定義の前）。

于 2012-06-22T21:25:46.307 に答える