javascript - 当我尝试在信息控件中显示信息时，传单功能 'onEachFeature' 不起作用-6ren

javascript - 当我尝试在信息控件中显示信息时，传单功能 'onEachFeature' 不起作用

转载作者：行者123 更新时间：2023-11-30 17:39:30

我是 javaScript 和 Leaflet 的新手，可能我做错了什么，但我想不通。我有 map 和六底。每次用户按下不同的底部时， map 中的标记都会更改以显示不同的数据。到目前为止，一切都很好。但是，我希望当用户将鼠标移到标记上时，信息会出现在右上角的自定义信息控件中。这就是问题所在。我在 Leaflet 网站上阅读了教程，他们使用了“onEachFeature”功能，但它对我不起作用。

有代码:

<html>
<head>
<title>Leaflet GeoJSON Example</title>
<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<style>
    #map {
        width: 800px;
        height: 500px;
    }

    .info {
        padding: 6px 8px;
        font: 14px/16px Arial, Helvetica, sans-serif;
        background: white;
        background: rgba(255,255,255,0.8);
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        border-radius: 5px;
    }
    .info h4 {
        margin: 0 0 5px;
        color: #777;
    }

    .legend {
        text-align: left;
        line-height: 18px;
        color: #555;
    }
    .legend i {
        width: 18px;
        height: 18px;
        float: left;
        margin-right: 8px;
        opacity: 0.7;
    }
</style>

</head>
<body>
            <div class="btn-group">
    <button class="btn" onClick="setupPage01();">2006</button>
    <button class="btn" onClick="setupPage02();">2007</button>
            <button class="btn" onClick="setupPage03();">2008</button>
    <button class="btn" onClick="setupPage04();">2009</button>
            <button class="btn" onClick="setupPage05();">2010</button>
    <button class="btn" onClick="setupPage06();">2011</button>
    </div>
<div id="map" style="width: 600px; height: 400px"></div>

    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js?2"></script>

 <script>
var points =  {
"type": "FeatureCollection",
"features": [
    {
        "type": "Feature",
        "properties": {
            "name": "Italia",
            "time": "2006",
             "radius": 22000
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                12.567379999999957,
                41.87194,
                1
            ]
        }
    },
              {
        "type": "Feature",
        "properties": {
            "name": "Grecia",
            "time": "2006",
             "radius": 9050
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                21.824311999999964,
                39.074208,
                1
            ]
        }
    },
                      {
        "type": "Feature",
        "properties": {
            "name": "España",
            "time": "2006",
             "radius": 32000
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                -3.7492200000000366,
                40.46366700000001,
                1
            ]
        }
    },
    {
        "type": "Feature",
        "properties": {
            "name": "Malta",
            "time": "2006",
             "radius": 18000
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                14.375415999999973,
                35.937496,
                1
            ]
        }
    }
                            ]
};

var points2 = {
"type": "FeatureCollection",
"features": [

{
        "type": "Feature",
        "properties": {
            "name": "Italia",
            "time": "2007",
             "radius": 19900
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                12.567379999999957,
                41.87194,
                1
            ]
        }
    },
              {
        "type": "Feature",
        "properties": {
            "name": "Grecia",
            "time": "2007",
             "radius": 19900
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                21.824311999999964,
                39.074208,
                1
            ]
        }
    },
                      {
        "type": "Feature",
        "properties": {
            "name": "España",
            "time": "2007",
             "radius": 18000
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                -3.7492200000000366,
                40.46366700000001,
                1
            ]
        }
    },
    {
        "type": "Feature",
        "properties": {
            "name": "Malta",
            "time": "2007",
             "radius": 18000
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                14.375415999999973,
                35.937496,
                1
            ]
        }
    }

  ]
};

var points3 = {
"type": "FeatureCollection",
"features": [
       {
        "type": "Feature",
        "properties": {
            "name": "Italia",
            "time": "2008",
             "radius": 36000
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                12.567379999999957,
                41.87194,
                1
            ]
        }
    },
              {
        "type": "Feature",
        "properties": {
            "name": "Grecia",
            "time": "2008",
             "radius": 15300
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                21.824311999999964,
                39.074208,
                1
            ]
        }
    },
                      {
        "type": "Feature",
        "properties": {
            "name": "España",
            "time": "2008",
             "radius": 13400
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                -3.7492200000000366,
                40.46366700000001,
                1
            ]
        }
    },
    {
        "type": "Feature",
        "properties": {
            "name": "Malta",
            "time": "2008",
             "radius": 2700
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                14.375415999999973,
                35.937496,
                1
            ]
        }
    }
          ]
};

 var points4 = {
"type": "FeatureCollection",
"features": [

{
        "type": "Feature",
        "properties": {
            "name": "Italia",
            "time": "2009",
             "radius": 9573
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                12.567379999999957,
                41.87194,
                1
            ]
        }
    },
              {
        "type": "Feature",
        "properties": {
            "name": "Grecia",
            "time": "2009",
             "radius": 10165
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                21.824311999999964,
                39.074208,
                1
            ]
        }
    },
                      {
        "type": "Feature",
        "properties": {
            "name": "España",
            "time": "2009",
             "radius": 7285
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                -3.7492200000000366,
                40.46366700000001,
                1
            ]
        }
    },
    {
        "type": "Feature",
        "properties": {
            "name": "Malta",
            "time": "2009",
             "radius": 1470
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                14.375415999999973,
                35.937496,
                1
            ]
        }
    }
                  ]
};

var points5 = {
"type": "FeatureCollection",
"features": [
    {
        "type": "Feature",
        "properties": {
            "name": "Italia",
            "time": "2010",
             "radius": 4348
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                12.567379999999957,
                41.87194,
                1
            ]
        }
    },
              {
        "type": "Feature",
        "properties": {
            "name": "Grecia",
            "time": "2010",
             "radius": 1765
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                21.824311999999964,
                39.074208,
                1
            ]
        }
    },
                      {
        "type": "Feature",
        "properties": {
            "name": "España",
            "time": "2010",
             "radius": 3632
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
               -3.7492200000000366,
               40.46366700000001,
                1
            ]
        }
    },
    {
        "type": "Feature",
        "properties": {
            "name": "Malta",
            "time": "2010",
             "radius": 28
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                14.375415999999973,
                35.937496,
                1
            ]
        }
    }
                          ]
};

var points6 = {
"type": "FeatureCollection",
"features": [

    {
        "type": "Feature",
        "properties": {
            "name": "Italia",
            "time": "2011",
             "radius": 61000
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                12.567379999999957,
                41.87194,
                1
            ]
        }
    },
              {
        "type": "Feature",
        "properties": {
            "name": "Grecia",
            "time": "2011",
             "radius": 1030
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                21.824311999999964,
                39.074208,
                1
            ]
        }
    },
                      {
        "type": "Feature",
        "properties": {
            "name": "España",
            "time": "2011",
             "radius": 5443
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                -3.7492200000000366,
                 40.46366700000001, 
                1
            ]
        }
    },
    {
        "type": "Feature",
        "properties": {
            "name": "Malta",
            "time": "2011",
             "radius": 1574
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                14.375415999999973,
                35.937496,
                1
            ]
        }
    } 
                             ]
};    

var map = L.map('map').setView([40.4,7.7],4);

L.tileLayer('http://{s}.tile.cloudmade.com/34c2e9a12fd4479faf8138690648fafa/22677  /256/{z}/{x}/{y}.png', {
maxZoom: 15,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>   contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
}).addTo(map);

function getSize(d) {
return (d)/1000 ;}

var info = L.control();

info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); 
this.update();
return this._div;
};

 info.update = function (props) {
 this._div.innerHTML = '<h4>Inmigrantes llegados a puertos</h4>' +  (props ?
    '<b>' + props.name + '</b><br />' + props.radius + ' personas</sup>'
    : 'Pasa el ratón por los circulos');
 };

 info.addTo(map);

 function highlightFeature(e) {
 var layer = e.target;
 info.update(layer.feature.properties);
 };


    var circulos1;
    var circulos2;
    var circulos3;
    var circulos4;
    var circulos5;
    var circulos6;


   function resetHighlight(e) {
   info.update();
   };


   function onEachFeature(feature, layer) {
   layer.on({
   mouseover: highlightFeature,
   mouseout: resetHighlight
   });
   }    

    circulos1 = L.geoJson(points, {
pointToLayer: function (feature, latlng) {
 return L.circleMarker(latlng, {
radius: getSize(feature.properties.radius),
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8,
    onEachFeature: onEachFeature
    });
}
    });

    circulos2 = L.geoJson(points2, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: getSize(feature.properties.radius),
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8,
    onEachFeature: onEachFeature
});
}
});


    circulos3 = L.geoJson(points3, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: getSize(feature.properties.radius),
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8,
    onEachFeature: onEachFeature
});
}
});


    circulos4 = L.geoJson(points4, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: getSize(feature.properties.radius),
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8,
    onEachFeature: onEachFeature
});
}
});


    circulos5 = L.geoJson(points5, {
 pointToLayer: function (feature, latlng) {
 return L.circleMarker(latlng, {
 radius: getSize(feature.properties.radius),
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8,
    onEachFeature: onEachFeature
});
 }
});


    circulos6 = L.geoJson(points6, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: getSize(feature.properties.radius),
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8,
    onEachFeature: onEachFeature
});
}
});

    function setupPage01() {
    map.removeLayer(circulos2)
    map.removeLayer(circulos3)
    map.removeLayer(circulos4)
    map.removeLayer(circulos5)
    map.removeLayer(circulos6)
    map.addLayer (circulos1);
    };

    function setupPage02() {
    map.removeLayer(circulos1)
    map.removeLayer(circulos3)
    map.removeLayer(circulos4)
    map.removeLayer(circulos5)
    map.removeLayer(circulos6)
    map.addLayer (circulos2);
    };

    function setupPage03() {
    map.removeLayer(circulos1)
    map.removeLayer(circulos2)
    map.removeLayer(circulos4)
    map.removeLayer(circulos5)
    map.removeLayer(circulos6)
    map.addLayer (circulos3);
    };

    function setupPage04() {
    map.removeLayer(circulos1)
    map.removeLayer(circulos2)
    map.removeLayer(circulos3)
    map.removeLayer(circulos5)
    map.removeLayer(circulos6)
    map.addLayer (circulos4);
    };

    function setupPage05() {
    map.removeLayer(circulos1)
    map.removeLayer(circulos2)
    map.removeLayer(circulos4)
    map.removeLayer(circulos3)
    map.removeLayer(circulos6)
    map.addLayer (circulos5);
    };

    function setupPage06() {
    map.removeLayer(circulos1)
    map.removeLayer(circulos2)
    map.removeLayer(circulos4)
    map.removeLayer(circulos5)
    map.removeLayer(circulos3)
    map.addLayer (circulos6);
    };

    </script>

最佳答案

当您定义 GeoJSON 图层(circulos1、circolos2...)时，您将把 onEachFeature 函数作为一个选项传递给 L.circleMarker，而这应该与 pointToLayer 一起作为一个选项传递给 L.geoJson。

如果您更新所有图层引用以匹配下方的图层引用，您的客户信息控件应在鼠标悬停和鼠标移出时填充。

circulos1 = L.geoJson(points, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, 
        {
            radius: getSize(feature.properties.radius),
            fillColor: "#ff7800",
            color: "#000",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8                
        });
    },
    onEachFeature: onEachFeature
});

关于javascript - 当我尝试在信息控件中显示信息时，传单功能 'onEachFeature' 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21370754/

文章推荐： javascript - 此语法与 Railscast JQuery 上传教程中的什么有关

文章推荐： JavaScript 隐藏基于子节点列表的 div 不起作用

objective-c - 如何在一个实体(控件)中组合多个 iOS 控件？
我想实现自定义搜索，但遇到了一个麻烦。我需要将 UIButton、SearchBar 组合在一个控件中，以便我可以通过指针引用它。然后我将向该组合控件动态添加更多 UIbutton。最重要的是，我想将
c# - 从母版页的代码后面访问 RadEditor 控件...当它存在时找不到任何 radEditor 控件...有什么问题吗？
它没有在我的方法中执行 if block 中的语句母版页:- 页面加载事件:- Control c = new Control(); DoSomething(c); 我的方法:- protecte
java - ListView 控件(如 ComBox 控件)中 setConverter 的等效项在哪里？
ComboBox 控件有一个 setConverter 方法，请参阅 JavaFX ComboBox - Display text but return ID on selection举个例子。我正在
用于标记化的 WPF 控件
我没有找到任何包含用于标记化(标记)文本输入的控件的 wpf 库。也许我找不到库，因为我错误地调用了这个组件。怎么叫或者哪里有这样的库？最佳答案 DevExpress WPF 库包含多个数据编辑控件
带有代码高亮显示的 Silverlight 控件？
是否有 Silverlight 控件允许您输入文本并将其突出显示为代码？例如: foreach (client in Clients){ client.Save();} would become
WPF TopMost 控件
我有以下用户控件 a) Panel.ZIndex="99999999" 是否是将此控件设置为该控件中 TopMost 的正
C# 隐藏所有标签/控件
是否可以在 Windows 窗体中使用 C# 在窗体加载时隐藏所有特定控件，例如标签或按钮，然后选择显示我不想显示的那些？我有一个包含很多按钮和标签的程序，但我只想在加载时显示一两个，我觉得对每个标
delphi - 如何复制组件/控件？
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: Duplicating components at Run-Time 我有一个TMyControl ( Contro
delphi - 控件 'xxx'没有父窗口
我正在尝试在 Delphi 中编写一个 dll 库，其中包含一个创建 TFrame 后代实例并返回它的函数。但是当我在应用程序中导入这个函数时，每次调用它时，我都会得到一个异常，例如“'xxx'控件没
winapi - 如何检测屏幕上特定点的窗口/控件？
是否有 Win32 API 调用来确定哪些窗口和/或控件在特定坐标和/或鼠标下可见？最佳答案您可以使用GetWindowFromPoint 。它将返回窗口句柄，以便您可以使用 GetClassNa
接受数学公式作为输入的 WinAPI 控件
我需要在编辑控件中输入以下公式: 公式是在 MS Word 中制作的。尝试将其复制/粘贴到编辑控件(单行或多行)后，我得到 M 0.33 Q10T9.1-9.7。当我输入这个时，我正在研究 Rich
创建 IWebBrowser2 控件
我只是想成功地将它添加到我的窗口中，但这却出奇地困难。我已经尝试过 #include "windef.h" #include "winbase.h" #include "initguid.h" #i
javascript - 自定义街景按钮/控件
我希望能够使用 google maps api v3 拥有自己的“街景”按钮。单击按钮时，我希望它根据我的标记经纬度加载街景。然后我希望按钮更改为“返回 map ”，然后再次加载默认 map View
PHP - Javascript 控件
我目前正在用 PHP 开发(另一个)开源 CMS，我想使用 javascript 控件，尤其是管理面板。问题是，是否有任何具有 PHP 接口(interface)的开源、可自由分发的控件(用于创建 j
PostgreSQL VCL 控件
我为其编写软件的产品之一是会计类应用程序。它用 C++ 编写，使用 C++ Builder 和 VCL 控件，连接到运行在 Linux 上的 PostgreSQL 数据库。 PostgreSQL 数据
Java KeyListener 控件
我使用 Key Listener 来读取用户的输入，但我遇到了问题。首先，我读到 JTextField“请输入您的姓名”。如果用户输入一个名字，例如 John，它将更改为 John。但是，如果用户输入
css - 如何对齐数据表列中的文本/控件？
我正在尝试对齐数据表列中的复选框(h=center，v=middle) ... 但复选框仍然显示在错误的位置(见附图)
用于深入了解统计树的 JavaScript 控件
我有一个包含统计信息的 JSON 数据树: { prefix: "a", count: 20, children: [ { prefix: "a:b", c
c# - ListView 控件
我在 Photoshop 中设计了一个模型，我打算将它应用到我的产品目录的 ListView 控件中，但它似乎没有正确显示(未对齐？)，我希望这里的人可以像我一样指出我的错误试图弄清楚无济于事。预期
ASP.NET 控件
您是使用 ASP.NET 控件还是仅使用带有 CSS 的 HTML？我在 TextBox 和 DropDownList 的宽度方面遇到了一些问题。在不同的浏览器中，宽度会有所不同，控件的大小也不会相

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 当我尝试在信息控件中显示信息时，传单功能 'onEachFeature' 不起作用