9

Leafletを使用して地図を描画しています。ポップアップ内に、より詳細な説明につながるリンクを追加しました。説明は地図から分離され、アコーディオンを使用してリストに配置されるため、すべての説明が非表示になります。

アンカーを使用してアコーディオンコンテンツにリンクすることはできますが、JavaScriptを実行する必要があるため、イベントハンドラーonclickを追加しようとしています。これは機能しません。click

これが私のコードです：

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Quick Start Guide Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--<script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>-->
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>

    <link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->

</head>
<body>

    <div id="map" style="width: 600px; height: 400px"></div>
    <div id="log"></div>

    <div id="map_box_text" class="status_half">
            <br>
            <br>
        <p>List made using JQuery UI accordion, every element is hidden, only on hover it opens, you can click on it to display on map, reverse cliking on map should aopen accordion list description (this), it's currently done using permalinks because I cannot catch click event on a or span tag.
        <div class="accordion">
            <h4><a href="#" class="pointpopup" id="point_111_11"> Ioff :: **** ***</a></h4>
                <div>Detailed data</div>
            <br>
            <br>
            <h4><a href="#" class="pointpopup" id="point_222_22">Us sb  :: **** ***    </a></h4>
                <div>Detailed data</div>
            <br>
            <br>
            <h4><a href="#" class="pointpopup" id="point_333_33">Ioff  :: **** ***</a></h4>
                <div>Detailed data</div>
            <br>
            <br>
            <h4><a href="#" class="pointpopup" id="point_555_44">Us sb  :: **** ***    </a></h4>
                <div>Detailed data</div>
        </div>
    </div>

    <script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

            var map = new L.Map('map', {
                center: new L.LatLng(51.641485,-0.15362),
                zoom: 13
            });

            var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/a0ead8ee56bd415896e0c7f7d22e8b6e/997/256/{z}/{x}/{y}.png',
            cloudmadeAttrib = 'Map data &copy; 2011 OpenStreetMap contributors',
            cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib});
            map.addLayer(cloudmade);
            var point = {};

                point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("<a href=\"#point_111_11\" class=\"map_popup link\">Ioff</a> <br>**** ***");
                point["point_222_22"] = new L.Marker(new L.LatLng(51.6616333333333,-0.0528583333333333)).bindPopup("<a href=\"#point_222_22\" class=\"map_popup link\">Us sb</a> <br>**** ***");
                point["point_333_33"] = new L.Marker(new L.LatLng(52.3910783333333,-0.696951666666667)).bindPopup("<a href=\"#point_333_33\" class=\"map_popup link\">Ioff</a> <br>**** ***");
                point["point_555_44"] = new L.Marker(new L.LatLng(51.641485,-0.15362)).bindPopup("<a href=\"#point_555_44\" class=\"map_popup link\">Us sb</a> <br>**** ***");

        var points_layer = new L.LayerGroup();

                points_layer.addLayer(point["point_111_11"]);
                points_layer.addLayer(point["point_222_22"]);
                points_layer.addLayer(point["point_333_33"]);
                points_layer.addLayer(point["point_555_44"]);
        map.addLayer(points_layer);

        $('.pointpopup').click(function(){
            var pointname = this.id;
            map.setView(point[pointname].getLatLng(),15);
            point[pointname].openPopup();
        });
    });

    $(window).load(function(){

        $("body").click(function(event) {
            //console.log('event target is:' + event.target.nodeName);
            $("#log").html("clicked: " + event.target.nodeName);
        });

        $('.map_popup').live('click',function () {
        //$('.map_popup').click(function(){
            alert('Try to open Accordion ' + $(this).attr('href'))
            //console.log('Try to open Accordion');
        })
    })
    </script>
</body>
</html>

JSFiddleで確認できます

これをgithubのバグとしてこことここのLeafletの開発者に報告しましたが、彼はバグを閉じて、問題ではなく、別の問題を使用できると返信しましたclass。これは機能しません。

編集：私も自分でいくつか見つけました：http：//jsfiddle.net/M5Ntr/12/ しかし、まだ問題があり、500ポイントになる可能性があるので、コードをできるだけ少なくしたいと思います、関数を作成しようとしましたが、変数を渡すことができません:(

これは機能しています

point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("<b>Ioff</b> <br>**** ***").on('click', function (e) { console.log("clicked (Try to open Accordion): " + e.target) });

しかし、これは望ましいです（機能していません）：

point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("<b>Ioff</b> <br>**** ***").on('click', myfunction('point_111_11'));

function myfunction(seclectedId){
   //do something with seclectedId
   console.log(seclectedId)
}

あるいは

point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("<b>Ioff</b> <br>**** ***").myBindFunction('point_111_11')

これは.on（'click'）または同様の内部で実行されます...

4

1 に答える 1

9

作成したチケットで指定されているように、DOM要素を作成してメソッドに渡すことがbindPopupできます...これを行うことができます：

var domelem = document.createElement('a');
domelem.href = "#point_555_444";
domelem.innerHTML = "Click me";
domelem.onclick = function() {
    alert(this.href);
    // do whatever else you want to do - open accordion etc
};

point["point_555_44"] = new L.Marker(new L.LatLng(51.641485, -0.15362)).bindPopup(domelem);

関数を更新するだけで、onclick必要なことを実行できます...。

これがあなたの例の中のコードの上記のセクションです

于 2012-06-29T15:19:37.053 に答える