Question

我在地图上添加了一个标记，并为其指定了一个自定义图标（myIcon），但添加图标后拖动功能停止工作。有没有办法在使用自定义图标时将draggable设置为true？在此先感谢您的帮助！

 var lat;
 var lng;
 var radius;
 var myIcon = L.icon({
     iconUrl: 'lens-icon.png',
     iconSize: [95, 95],
 });

 L.mapbox.accessToken = 'TOKEN HERE';
 var map = L.mapbox.map('map', 'MAP.ID')
     .addControl(L.mapbox.geocoderControl('mapbox.places', { // add search box
         autocomplete: true //make autocomplete
     }))
     .setView([47.3850000, 39.2430556], 9); //start position and zoom level

 var searchLens = L.marker([47.38, 39.24], {
     icon: myIcon
 }, {
     draggable: true
 }).addTo(map);

 searchLens.on('drag', function(e) {
     lat = searchLens.getLatLng().lat;
     lng = searchLens.getLatLng().lng;
 });

 searchLens.on('dragend', function(e) {
     lat = searchLens.getLatLng().lat;
     lng = searchLens.getLatLng().lng;
     $(".block_photos").empty();
     getPhotos();
 });

Answer 1

使用此draggable: true设置标记可拖动不正确，您必须将其设置为draggable: 'true'。将true和false传递为字符串。

JSFiddle

参见此示例

var map = L.map('map', {
    center: [51.5, -0.09],
    zoom: 13
});

L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
    attribution: "Map: Tiles Courtesy of MapQuest (OpenStreetMap, CC-BY-SA)",
    subdomains: ["otile1", "otile2", "otile3", "otile4"]

}).addTo(map);

var LeafIcon = L.Icon.extend({
    options: {
        shadowUrl: 'http://leafletjs.com/docs/images/leaf-shadow.png',
        iconSize: [38, 95],
        shadowSize: [50, 64],
        iconAnchor: [22, 94],
        shadowAnchor: [4, 62],
        popupAnchor: [-3, -76]
    }
});

var greenIcon = new LeafIcon({
        iconUrl: 'http://leafletjs.com/docs/images/leaf-green.png'
    }),
    redIcon = new LeafIcon({
        iconUrl: 'http://leafletjs.com/docs/images/leaf-red.png'
    }),
    orangeIcon = new LeafIcon({
        iconUrl: 'http://leafletjs.com/docs/images/leaf-orange.png'
    });

var greenMarker = L.marker([51.495, -0.083], {
    icon: greenIcon,
    draggable: 'true'
}).bindPopup("I am a green leaf.").addTo(map);

L.marker( [51.5, 0.09], {
    icon: redIcon,
    draggable: 'true'
}).bindPopup("I am a red leaf.").addTo(map);
L.marker([51.49, -0.1], {
    icon: orangeIcon,
    draggable: 'true'
}).bindPopup("I am an orange leaf.").addTo(map);


console.log(greenMarker);
greenMarker.on('dragend', function(event) {
    var marker = event.target;
    var position = marker.getLatLng();
    alert(position);
});

/* Map */
 #map {
    height: 440px;
}

<link href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css" rel="stylesheet"/>

<script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.js"></script>

<div id="map"></div>

Leaflet Maps - 如何使客户标记/图标可拖动

1 个答案: