当鼠标悬停在不同颜色上时，传单突出显示标记
Leaflet highlight marker when mouseover with different colors
当我将鼠标悬停在标记上时，我正试图设置标记高亮显示。我的标记是根据用户是否活跃来着色的。如果它们是活跃的，标记物会进一步区分雄性和雌性。
我的HTML文件看起来像：
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--The CSS files-->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css"/>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css">
<!--The dependent .js files-->
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
</head>
<body>
<title>Circle Highlight</title>
<style> html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</body>
<div id="map"></div>
<script type='text/javascript' src='C:'Users'Lukasz Obara'OneDrive'Programing'HTML'Slider'circles.geojson'></script>
<script type='text/javascript' src='C:'Users'Lukasz Obara'OneDrive'Programing'HTML'Slider'leaflet_demo_circles.js'></script>
我的circles.geojson文件：
var circles= {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.1966, 31.7825]
},
"properties": {
"GPSId": "2",
"DateStart": "2015-06-23",
"DateClosed": "2016-01-23",
"GPSUserName": "fake2",
"GPSUserColor": "#FF5500",
"Gender": "Male",
"Active": 1
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.2, 31.780117]
},
"properties": {
"GPSId": "6",
"DateStart": "2015-06-23",
"DateClosed": "2016-01-23",
"GPSUserName": "fake1",
"GPSUserColor": "#00FF57",
"Gender": "Female",
"Active": 0
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.201715, 31.779548]
},
"properties": {
"GPSId": "15",
"DateStart": "2015-02-21",
"DateClosed": "2016-02-28",
"GPSUserName": "fake10",
"GPSUserColor": "#00FF57",
"Gender": "Male",
"Active": 1
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.200987, 31.779606]
},
"properties": {
"GPSId": "16",
"DateStart": "2015-01-01",
"DateClosed": "2016-01-01",
"GPSUserName": "fake11",
"GPSUserColor": "#00FF57",
"Gender": "Female",
"Active": 0
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.200987, 31.780522]
},
"properties": {
"GPSId": "17",
"DateStart": "2015-02-04",
"DateClosed": "2016-09-21",
"GPSUserName": "fake12",
"GPSUserColor": "#00FF57",
"Gender": "Male",
"Active": 1
}
}]
};
和我的javascript leaflet_demo_circles.js文件
var map = L.map( 'map', {
center: [31.780117, 35.2],
zoom: 17,
minZoom: 2,
maxZoom: 20
});
L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
subdomains: ['otile1','otile2','otile3','otile4']
}).addTo(map);
// This will produce a static black circle
var circle2 = L.circle([31.7805, 35.203], 8, {
color: "#000000",
stroke: true,
fillColor: "#000000",
weight: 2,
fillOpacity: 0.7
}).addTo(map);
///////////////////////////////////////////////////////////////////////////
//Aesthetics //
///////////////////////////////////////////////////////////////////////////
//define styles for circle markers
var blueMarker ={
radius: 8,
stroke: true,
color: "#0000FF",
weight: 2,
opacity: 1,
fill: true,
// fillColor: "#FF0000",
fillOpacity: 0.5
}
var pinkMarker ={
radius: 8,
stroke: true,
color: "#FF99FF",
weight: 2,
opacity: 1,
fill: true,
// fillColor: "#FF0000",
fillOpacity: 0.5
}
var greyMarker = {
radius: 8,
stroke: true,
color: "#808080",
weight: 2,
opacity: 1,
fill: true,
// fillColor: "#FF0000",
fillOpacity: 0.5
};
// Highlighted circles ///////////////////
var blueMarkerHighlighted ={
radius: 10,
stroke: true,
color: "#0000FF",
weight: 2,
opacity: 1,
fill: true,
// fillColor: "#FF0000",
fillOpacity: 0.75
}
var pinkMarkerHighlighted ={
radius: 10,
stroke: true,
color: "#FF99FF",
weight: 2,
opacity: 1,
fill: true,
// fillColor: "#FF0000",
fillOpacity: 0.75
}
var greyMarkerHighlighted = {
radius: 10,
stroke: true,
color: "#808080",
weight: 2,
opacity: 1,
fill: true,
// fillColor: "#FF0000",
fillOpacity: 0.75
};
///////////////////////////////////////////////////////////////////////////
//functions to attach styles and popups to the marker layer //
///////////////////////////////////////////////////////////////////////////
//Assigns colors based on activity and gender
function colors (feature, layer) {
if (feature.properties.Active === 1) {
if (feature.properties.Gender === "Male") {
return L.circleMarker(layer, blueMarker);
} else {
return L.circleMarker(layer, pinkMarker);
}
} else {
return L.circleMarker(layer, greyMarker);
}
};
function popup (feature, layer) {
layer.bindPopup("<h1>" + feature.properties.GPSUserName + "</h1>");
};
///////////////////////////////////////////////////////////////////////////
//displaying the data on the map //
///////////////////////////////////////////////////////////////////////////
dotlayer = L.geoJson(circles, {
pointToLayer: colors,
onEachFeature: popup
}).addTo(map);
我试着用下面的函数替换上面的两个函数，以指定颜色并在鼠标悬停时产生效果，但没有成功。
function dotStyleDefault() {
if (feature.properties.Active === 1) {
if (feature.properties.Gender === "Male") {
return blueMarker;
} else {
return pinkMarker;
}
} else {
return greyMarker;
}
};
function dotStyleHighlight(){
if (feature.properties.Active === 1) {
if (feature.properties.Gender === "Male") {
return blueMarkerHighlighted;
} else {
return pinkMarkerHighlighted;
}
} else {
return greyMarkerHighlighted;
}
}
function highlightDot(e) {
var layer = e.target;
layer.setStyle(dotStyleHighlight);
};
function resetDotHighlight(e) {
var layer = e.target;
layer.setStyle(dotStyleDefault);
};
function onEachDot(feature, layer) {
layer.on({
mouseover: highlightDot,
mouseout: resetDotHighlight
});
layer.bindPopup('<table style="width:150px"><tbody><tr><td><div><b>name:</b></div></td><td><div>' + feature.properties.GPSId + '</div></td></tr><tr class><td><div><b>year:</b></div></td><td><div>' + feature.properties.DateStart + '</div></td></tr></tbody></table>');
};
///////////////////////////////////////////////////////////////////////////
//displaying the data on the map //
///////////////////////////////////////////////////////////////////////////
dotlayer = L.geoJson(circles, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, dotStyleDefault);
},
onEachFeature: onEachDot
}).addTo(map);
我找到的一个解决方案是修改geojson文件以包含Colour属性。因此circles.geojson类似
var circles = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.1966, 31.7825]
},
"properties": {
"GPSId": "2",
"DateStart": "2015-06-23",
"DateClosed": "2016-01-23",
"GPSUserName": "2",
"GPSUserColor": "#FF5500",
"Gender": "Male",
"Active": 1,
"Colour": "#0000FF" //THIS IS ADDED BASED ON ACTIVITY LEVEL AND GENDER
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.2, 31.780117]
},
"properties": {
"GPSId": "6",
"DateStart": "2015-06-23",
"DateClosed": "2016-01-23",
"GPSUserName": "fake1",
"GPSUserColor": "#00FF57",
"Gender": "Female",
"Active": 0,
"Colour": "#808080" //THIS IS ADDED BASED ON ACTIVITY LEVEL AND GENDER
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.201715, 31.779548]
},
"properties": {
"GPSId": "15",
"DateStart": "2015-02-21",
"DateClosed": "2016-02-28",
"GPSUserName": "fake10",
"GPSUserColor": "#00FF57",
"Gender": "Male",
"Active": 1,
"Colour": "#0000FF" //THIS IS ADDED BASED ON ACTIVITY LEVEL AND GENDER
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.200987, 31.779606]
},
"properties": {
"GPSId": "16",
"DateStart": "2015-01-01",
"DateClosed": "2016-01-01",
"GPSUserName": "fake11",
"GPSUserColor": "#00FF57",
"Gender": "Female",
"Active": 0,
"Colour": "#808080" //THIS IS ADDED BASED ON ACTIVITY LEVEL AND GENDER
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.200987, 31.780522]
},
"properties": {
"GPSId": "17",
"DateStart": "2015-02-04",
"DateClosed": "2016-09-21",
"GPSUserName": "fake12",
"GPSUserColor": "#00FF57",
"Gender": "Male",
"Active": 1,
"Colour": "#0000FF" //THIS IS ADDED BASED ON ACTIVITY LEVEL AND GENDER
}
}
然后我可以省略circles.js中的条件语句，这将导致：
var map = L.map( 'map', {
center: [31.780117, 35.2],
zoom: 17,
minZoom: 2,
maxZoom: 20
});
L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
subdomains: ['otile1','otile2','otile3','otile4']
}).addTo(map);
// This will produce a static black circle
var circle2 = L.circle([31.7805, 35.203], 8, {
color: "#000000",
stroke: true,
fillColor: "#000000",
weight: 2,
fillOpacity: 0.7
}).addTo(map);
///////////////////////////////////////////////////////////////////////////////
//Aesthetics //
///////////////////////////////////////////////////////////////////////////////
var markerDefault = {
radius: 8,
weight: 2,
opacity: 1,
fillOpacity: 0.5
};
var markerHighlight = {
radius: 10,
weight: 3,
opacity: 1,
fillOpacity: 0.75
};
///////////////////////////////////////////////////////////////////////////////
//functions to attach styles and popups to the marker layer //
///////////////////////////////////////////////////////////////////////////////
function highlightDot(e) {
var layer = e.target;
layer.setStyle(markerHighlight);
};
function resetDotHighlight(e) {
var layer = e.target;
layer.setStyle(markerDefault);
};
function onEachDot(feature, layer) {
layer.on({
mouseover: highlightDot,
mouseout: resetDotHighlight
});
layer.bindPopup('<table style="width:150px"><tbody><tr><td><div><b>name:</b></div></td><td><div>' + feature.properties.GPSId + '</div></td></tr><tr class><td><div><b>year:</b></div></td><td><div>' + feature.properties.DateStart + '</div></td></tr></tbody></table>');
};
///////////////////////////////////////////////////////////////////////////
//displaying the data on the map //
///////////////////////////////////////////////////////////////////////////
dotlayer = L.geoJson(circles, {
style: function(feature) {
return {color: feature.properties.Colour};
},
pointToLayer: function(feature, latlng) {
return new L.CircleMarker(latlng, markerDefault);
},
onEachFeature: onEachDot
}).addTo(map);
// init a map scale
L.control.scale().addTo(map);
在不修改.geojson文件
相关文章：
- 检测页面上某个元素中选择(突出显示）或单击的内容
- 如何创建一个“;表单弹出框“;在chrome中右键单击时位于突出显示的单词上方
- 兰吉 |如何在 span 标签上使用单击事件删除突出显示的文本
- 如果同一页面上有多个谷歌地图，单击任何标记都会突出显示最底部的地图标记
- 单击时如何突出显示表TD
- 单击按钮时突出显示行
- 单击按钮以突出显示地图标记 (Gmaps） - 如何
- 从 html 表中选择一行(突出显示）并在单击按钮时发送值
- 单击时需要突出显示jqxNumberInput的内容
- 突出显示iframe内的文本，同时使用jquery单击文档上的相同文本
- 如何在第一次点击时突出显示链接;并在第二次单击时跟随它，除非在其他地方单击，然后重新初始化未高亮显示的状态
- 如何在导航栏中突出显示单页网站的位置
- jQuery/ CSS:单击时突出显示行不起作用
- 单击上一个/下一个按钮时，我想突出显示下一个或上一个图像
- 单击时，突出显示表列
- 单击行时突出显示 Jqgrid，但不选中多选复选框
- 有没有办法模糊/突出显示单选按钮的文本
- Javascript - 如何突出显示上次单击的列表项
- 单击提交时如何在 md 输入容器中显示突出显示错误
- 突出显示如何在单击重置缩放按钮事件中捕获和插入逻辑
