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>

你可以在JS Fiddle上查看

我已将此作为 github 上的错误报告给 Leaflet 的开发人员here和here但他关闭错误回复说这不是问题，我可以使用另一个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 回答