कैसे MapboxGL में खींचने योग्य एक कस्टम छवि के साथ एक मार्कर बनाने के लिए?

वोट
4

वहाँ कैसे का एक उदाहरण है खींचने योग्य एक बिंदु बनाने के (जो एक परत होती है) और वहाँ कैसे का एक उदाहरण है सेटअप एक कस्टम छवि के साथ एक मार्कर , लेकिन मैं कैसे होगा कि यह एक नहीं है जब कस्टम छवि नक्शे पर खींचने योग्य इसके साथ जुड़े परत ?!

25/09/2016 को 22:25
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
0

मैं कुछ एक और उदाहरण मैंने पाया से इस के साथ आया था, और दो मिश्रित। यह मैं क्या चाहता था के लिए काम किया ... मैं इस जबकि जवाब की तलाश में (कई बार) देखकर याद तो मैं साझा करने के लिए वापस आ गया।

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Add custom icons with Markers</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
#marker6060 {
    background-image: url('https://placekitten.com/g/60/60/');
    background-size: cover;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
}
#marker5050 {
    background-image: url('https://placekitten.com/g/50/50/');
    background-size: cover;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}
#marker4040 {
    background-image: url('https://placekitten.com/g/40/40/');
    background-size: cover;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}
</style>

<div id='map'></div>

<script>
mapboxgl.accessToken = 'YOURS, NOT MINE.';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-65.017, -16.457],
    zoom: 5
});

var element6060 = document.createElement('div');
element6060.id = 'marker6060';
var marker6060 = new mapboxgl.Marker({
    element: element6060,
    draggable: true,
    color: '#000000'
})
    .setLngLat([-66.324462890625, -16.024695711685304])
    .addTo(map);
    element6060.addEventListener('click', function() {
      var message = 'Kitty 6060';
        window.alert(message);
    });



var element5050 = document.createElement('div');
element5050.id = 'marker5050';
var marker5050 = new mapboxgl.Marker({
    element: element5050,
    draggable: true,
    color: '#000000'
})
    .setLngLat([-61.2158203125, -15.97189158092897])
    .addTo(map);
    element5050.addEventListener('click', function() {
      var message = 'Kitty 5050';
        window.alert(message);
    });


var element4040 = document.createElement('div');
element4040.id = 'marker4040';
var marker4040 = new mapboxgl.Marker({
    element: element4040,
    draggable: true,
    color: '#000000'
})
    .setLngLat([-63.29223632812499, -18.28151823530889])
    .addTo(map);
    element4040.addEventListener('click', function() {
      var message = 'Kitty 4040';
        window.alert(message);
    });

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset='utf-8' />
        <title>Add custom icons with Markers No Layer, Draggable</title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
        <style>
            body { margin:0; padding:0; }
            #map { position:absolute; top:0; bottom:0; width:100%; }
        </style>
    </head>
    <body>

    <style>
    #marker6060 {
        background-image: url('https://placekitten.com/g/60/60/');
        background-size: cover;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        cursor: pointer;
    }
    #marker5050 {
        background-image: url('https://placekitten.com/g/50/50/');
        background-size: cover;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
    }
    #marker4040 {
        background-image: url('https://placekitten.com/g/40/40/');
        background-size: cover;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
    }
    </style>

    <div id='map'></div>

    <script>
    mapboxgl.accessToken = 'YOURS, NOT MINE.';

    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [-65.017, -16.457],
        zoom: 5
    });

    var element6060 = document.createElement('div');
    element6060.id = 'marker6060';
    var marker6060 = new mapboxgl.Marker({
        element: element6060,
        draggable: true
    })
        .setLngLat([-66.324462890625, -16.024695711685304])
        .addTo(map);
        element6060.addEventListener('click', function() {
          var message = 'Kitty 6060';
            window.alert(message);
        });



    var element5050 = document.createElement('div');
    element5050.id = 'marker5050';
    var marker5050 = new mapboxgl.Marker({
        element: element5050,
        draggable: true
    })
        .setLngLat([-61.2158203125, -15.97189158092897])
        .addTo(map);
        element5050.addEventListener('click', function() {
          var message = 'Kitty 5050';
            window.alert(message);
        });


    var element4040 = document.createElement('div');
    element4040.id = 'marker4040';
    var marker4040 = new mapboxgl.Marker({
        element: element4040,
        draggable: true
    })
        .setLngLat([-63.29223632812499, -18.28151823530889])
        .addTo(map);
        element4040.addEventListener('click', function() {
          var message = 'Kitty 4040';
            window.alert(message);
        });



    </script>

    </body>
    </html>
</script> </body> </html>
09/12/2018 को 05:34
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more