Fatal编程技术网
  • javascript/
  • Javascript 当鼠标滑过不同颜色时，传单突出显示标记

Javascript 当鼠标滑过不同颜色时，传单突出显示标记

javascript jquery leaflet

Javascript 当鼠标滑过不同颜色时，传单突出显示标记,javascript,jquery,leaflet,Javascript,Jquery,Leaflet,当我将鼠标移到标记上时，我正在尝试设置标记高亮显示。我的标记根据用户是否处于活动状态而着色。如果它们是活跃的，该标记将进一步区分男性和女性 我的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;

当我将鼠标移到标记上时，我正在尝试设置标记高亮显示。我的标记根据用户是否处于活动状态而着色。如果它们是活跃的，该标记将进一步区分男性和女性

我的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>
还有我的javascript
传单\u demo\u 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: '&copy; <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);

var map=L.map（'map'{
中间：[31.780117135.2]，
缩放：17，
minZoom:2，
最大缩放：20
});
L.tileLayer（'http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png'{
归属：“©；贡献者|由”，
子域：['otile1'，'otile2'，'otile3'，'otile4']
}).addTo（地图）；
//这将产生一个静态的黑色圆圈
var circle2=L.圆（[31.7805,35.203]，8{
颜色：“000000”，
中风：是的，
fillColor:#000000“，
体重：2，
填充不透明度：0.7
}).addTo（地图）；
///////////////////////////////////////////////////////////////////////////
//美学//
///////////////////////////////////////////////////////////////////////////
//定义圆标记的样式
蓝标={
半径：8，
中风：是的，
颜色：“0000FF”，
体重：2，
不透明度：1，
填充：是的，
//fillColor:#FF0000“，
填充不透明度：0.5
}
品克马克={
半径：8，
中风：是的，
颜色：“FF99FF”，
体重：2，
不透明度：1，
填充：是的，
//fillColor:#FF0000“，
填充不透明度：0.5
}
变量格雷马克={
半径：8，
中风：是的，
颜色：#808080“，
体重：2，
不透明度：1，
填充：是的，
//fillColor:#FF0000“，
填充不透明度：0.5
};
//突出显示的圆圈///////////////////
var Bluemarker高亮显示={
半径：10，
中风：是的，
颜色：“0000FF”，
体重：2，
不透明度：1，
填充：是的，
//fillColor:#FF0000“，
填充不透明度：0.75
}
var pinkMarkerHighlighted={
半径：10，
中风：是的，
颜色：“FF99FF”，
体重：2，
不透明度：1，
填充：是的，
//fillColor:#FF0000“，
填充不透明度：0.75
}
变量greyMarkerHighlighted={
半径：10，
中风：是的，
颜色：#808080“，
体重：2，
不透明度：1，
填充：是的，
//fillColor:#FF0000“，
填充不透明度：0.75
};
///////////////////////////////////////////////////////////////////////////
//用于将样式和弹出窗口附加到标记层的函数//
///////////////////////////////////////////////////////////////////////////
//根据活动和性别指定颜色
功能颜色（特征、图层）{
如果（feature.properties.Active==1）{
如果（feature.properties.Gender==“男性”）{
返回L.circleMarker（图层，蓝色标记）；
}否则{
返回L.circleMarker（图层、粉红色标记器）；
}
}否则{
返回L.circleMarker（图层，灰色标记）；
}
};
功能弹出窗口（功能、图层）{
layer.bindPopup（“+feature.properties.GPSUserName+”）；
};
///////////////////////////////////////////////////////////////////////////
//在地图上显示数据//
///////////////////////////////////////////////////////////////////////////
dotlayer=L.geoJson（圆{
指针图层：颜色，
onEachFeature：弹出窗口
}).addTo（地图）；
我尝试用下面的函数替换上面的两个函数，以指定颜色，并在鼠标悬停时产生效果，但没有成功

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);

函数dotStyleDefault（）{
如果（feature.properties.Active==1）{
如果（feature.properties.Gender==“男性”）{
返回蓝标；
}否则{
返粉机；
}
}否则{
返回格雷马克；
}
};
函数dotStyleHighlight（）{
如果（feature.properties.Active==1）{
如果（feature.properties.Gender==“男性”）{
返回蓝色标记亮起；
}否则{
返回粉红色标记亮起；
}
}否则{
返回灰色标记灯；
}
}
功能高亮点（e）{
var层=e.目标；
layer.setStyle（点样式突出显示）；
};
函数重置点突出显示（e）{
var层=e.目标；
layer.setStyle（点样式默认值）；
};
功能onEachDot（特征、图层）{
分层({
鼠标悬停：highlightDot，
mouseout:resetdotphighlight
});
layer.bindPopup（'name:'+feature.properties.GPSId+'year:'+feature.properties.DateStart+''）；
};
///////////////////////////////////////////////////////////////////////////
//在地图上显示数据//
///////////////////////////////////////////////////////////////////////////
dotlayer=L.geoJson（圆{
pointToLayer：功能（特性、latlng）{
返回L.circleMarker（latlng，dotStyleDefault）；
},
onEachFeature:onEachDot
}).addTo（地图）；
我找到的一个解决方案是修改
geojson
文件以包含
color
属性。因此，
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: '&copy; <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);

var map=L.map（'map'{
中间：[31.780117135.2]，
缩放：17，
minZoom:2，
最大缩放：20
});
L.tileLayer（'http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png'{
归属：“©；贡献者|由”，
子域：['otile1'，'otile2'，'otile3'，'otile4']
}).addTo（地图）；
//这将产生一个静态的黑色圆圈
var circle2=L.圆（[31.7805,35.203]，8{
颜色：“000000”，
中风：是的，
fillColor:#000000“，
体重：2，
填充不透明度：0.7
}).addTo（地图）；
///////////////////////////////////////////////////////////////////////////////
//美学//
///////////////////////////////////////////////////////////////////////////////
var markerDefault={
半径：8，
体重：2，
不透明度：1，
填充不透明度：0.5
};
var markerHighlight={

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: '&copy; <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);