Assign ID to marker in leaflet

后端 未结 7 1083
忘了有多久
忘了有多久 2020-12-23 11:47

So i try to achieve a result as on foursquare: https://foursquare.com/explore?cat=drinks&mode=url&near=Paris which is when you clik on a marker on the map, it scrol

7条回答
  •  南方客
    南方客 (楼主)
    2020-12-23 12:14

    var MarkerIcon = L.Icon.extend({
        options: {
            customId: "",
            shadowUrl: 'leaf-shadow.png',
            iconSize: [64, 64],
            shadowSize: [50, 64],
            iconAnchor: [22, 94],
            shadowAnchor: [4, 62],
            popupAnchor: [-3, -76]
        }
    });
    
    var greenIcon = new MarkerIcon({iconUrl: "/resources/images/marker-green.png"}),            
        redIcon = new MarkerIcon({iconUrl: "/resources/images/marker-red.png"}),
        orangeIcon = new MarkerIcon({iconUrl: "/resources/images/marker-orange.png"});
    
    var mymap = L.map('mapid').setView([55.7522200, 37.6155600], 13);
    
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        id: 'mapbox.streets'
    }).addTo(mymap);
    
    // добавить маркер
    L.marker([55.7522200, 37.6155600], {customId:"010000006148", icon: greenIcon, title:setMarkerTitle("010000006148")}).addTo(mymap).on('click', markerOnClick);
    L.marker([55.7622200, 37.6155600], {customId:"010053166625", icon: redIcon, title: setMarkerTitle("010053166625")}).addTo(mymap).on('click', markerOnClick);
    
    function markerOnClick(e) {
        var customId = this.options.customId;
        document.location.href = "/view/abonents/" + customId;
    }
    
    function setMarkerTitle(customId){
        var result = customId;
        result += "\nline2 ";
        result += "\nline3 ";
        return result;
    }
    

提交回复
热议问题