Question

我正在网上展示自然公园的路线信息。当用户单击轨道时，它应该使用轨道详细信息（geojson上的外部html）更新div“#info”。我无法获得详细信息！

这是javascript代码：

 var map = L.mapbox.map('map', 'pokomoko.l6e2j9h1');

var geojson = [{
    "type": "FeatureCollection",
        "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
    },
    "features": [{
        "type": "Feature",
        "properties": {
            "Name": "Camí circular",
            "Descriptio": null,
            'id': 2,
            "stroke": "blue",
            "stroke-opacity": 1,
            "stroke-width": 6,
            "URL": 'Circular/circular_cat.html'
        },
        "geometry": {
            "type": "LineString",
            "coordinates": [
                [1.768113361018627, 41.609716521663515],
                [1.768283835249583, 41.609747082164205],
                [1.768422882004483, 41.609779001160376],
                [1.7685547698433, 41.609805665922217],
                [1.768687708285772, 41.609832049115262],
                [1.768817761141674, 41.609857849364609],
                [1.768905770134774, 41.609893436891795], 
                // ....
            ]
        }];

    // Create a feature layer that will hold the GeoJSON above.
    var features = L.mapbox.featureLayer().addTo(map);

    features.setGeoJSON(geojson);

    features.on('mouseover', function (e) {
        focusline(e.layer.feature.properties.id);
    });

    features.on('click', function() {
                        $("#info").load(getURL(features)).hide().fadeIn('slow');
                    });

    function focusline(focus) {
        // Iterate through each feature in the
        // features object and alter the properties.
        features.eachLayer(function (l) {
            var props = l.feature.properties;
            props['stroke-opacity'] = (props.id !== focus) ? 0.25 : 1;
        });

        // Rerun the geojson
        features.setGeoJSON(geojson);
    }

Answer 1

这是一种方法。

                   var features = L.mapbox.featureLayer().addTo(map);

                     features.setGeoJSON(geojson);

                     features.on('click', function(e) {
                    loadIframe(e.layer.feature.properties.data);    
                    });

                     features.on('mouseover', function(e) {
                     focusline(e.layer.feature.properties.id);
                    });

                    function loadIframe (url) {
                    $("#info").load(url).hide().fadeIn('slow');
                    // Rerun the geojson
                    features.setGeoJSON(geojson);
                    };

                    function focusline(focus) {
                    // Iterate through each feature in the
                    // features object and alter the properties.
                    features.eachLayer(function(l) {
                    var props = l.feature.properties;
                    props['stroke-opacity'] = (props.id !== focus) ? 0.5 : 1;});
                           }

使用其他一些内容更新特定div的内容

1 个答案: