изменить маркер на листовой карте по событию extern (при наведении курсора) - PullRequest
Новая
       33

изменить маркер на листовой карте по событию extern (при наведении курсора)

0 голосов
/ 23 февраля 2020

Мне нравится составлять список POI (достопримечательности) и показывать места на карте OSM / листовке.

У меня есть функция для отображения обоих, (в этом случае мне проще отфильтруйте элементы позже!)

Кроме того, мне нужна функция, которая переключает кнопку маркера на карте osm (map-container), если на моей кнопке location () на контейнере элемента имеется элемент mouseOverEvent. 1005 *

кто может помочь мне изменить мой код? 

<!doctype html>
<html  lang="de-de">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>list leaflet list</title>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<link  rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<link  rel="stylesheet" href="css/fewo.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="js/leaflet_numbered_markers.js" type="text/javascript"></script>
<script src="js/fewo-flex-ohne.js" type="text/javascript"></script>
</head>

<body>
<script type="text/javascript">
let planes = [
        {
            numma: "1",
            id: "poi1",
            titel: "1 - POI 1",
            ort: "Wandlitz",
            desc: "this is the description of first POI.",
            geo: [52.74463048491,13.458953985069],
            thumb: "dummy.jpg",
        },
        {
            numma: "2",
            id: "fpoi2",
            titel: "2 - POI 2",
            ort: "Joachimsthal",
            desc: "this is the description of second POI. ",
            geo: [52.9589853893,13.750128285797],
            thumb: "dummy.jpg",
        },
        {
            numma: "3",
            id: "poi3",
            titel: "3 - POI 3",
            ort: "Eberswalde",
            desc: "this is the description of third POI",
            geo: [52.869089025946,13.748048886725], 
            thumb: "dummy.jpg",
        },
        ];
console.log('planes:'+planes);
</script>

<main>
    <div class="maincontent flex-container"></div>
    <div id="mapid"></div>
</main>

<script type="text/javascript">
var tempArray = new Array();

//render
function renderHTML(d)
{
    let html = ''
    html += '<div class="flex-item col-md-6 col-sm-12 col-xs-12">'
    html += '<div  class="col-xs-12 teaser-image" style="background-image:url(./images/'+d.thumb+')"></div>';
    html += '<h2>'+d.titel+'</h2>'
    html += '<div class="hilfscontainer">'
    html += '<div class="locpic"><img src="./images/marker-icon.png" alt="ort">'
    html += '<span class="numma-overlay"><a href="#" id="clicker">'+d.numma+'</a></span></div>'
    html += '<span class="hot-loc"> '+d.ort+'</span>'
    html += '</div>'
return html
}

//create numbered icons
L.NumberedDivIcon = L.Icon.extend({
    options: {
    iconUrl: './images/marker-icon.png',
    number: '',
    shadowUrl: null,
    iconSize: new L.Point(25, 41),
        iconAnchor: new L.Point(13, 41),
        popupAnchor: new L.Point(0, -33),
        className: 'leaflet-div-icon'
    },

    createIcon: function () {
        var div = document.createElement('div');
        var img = this._createImg(this.options['iconUrl']);
        var numdiv = document.createElement('div');
        numdiv.setAttribute ( "class", "number" );
        numdiv.innerHTML = this.options['number'] || '';
        div.appendChild ( img );
        div.appendChild ( numdiv );
        this._setIconStyles(div, 'icon');
        return div;
    },
});

//display
function cntDisplay(elem,place)
{

    //map initialize
    map = L.map('mapid').setView([52.977919629833, 13.742566749552], 9);
    mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        {
        attribution: '&copy; ' + mapLink + ' Contributors',
        maxZoom: 18,
        }
    ).addTo(map);

    //load data
    tempArray = planes
    counter = 1;

    //display items
    $.each(tempArray,function(i,poi){
        $(elem).append(renderHTML(poi))
        });

    //display markers
    $.each(tempArray,function(i,val){
        var marker = new L.Marker(val.geo, {
            icon:   new L.NumberedDivIcon({number: counter}),
            opacity: 1,
        }).bindPopup(val.titel).addTo(map);
        counter = counter  + 1;

        console.log(val.geo);
        });

    console.log(tempArray);
}

cntDisplay($('.maincontent'),planes)
</script>
</body>
</html>
...