MapBox जीएल जे एस मार्कर ऑफसेट

वोट
3

मैं उपयोग कर रहा हूँ MapBox जीएल जे एस एक कस्टम मार्कर के साथ एक नक्शा बनाने के लिए:

var marker = new mapboxgl.Marker(container)
    .setLngLat([
        datacenters[country][city].coordinates.lng,
        datacenters[country][city].coordinates.lat
    ])
    .addTo(map);

हालांकि, मैं मार्कर के साथ ऑफसेट समस्या किसी तरह का लगता है। बात है: जब बाहर एक सा जूम, मार्कर के नीचे वास्तव में सटीक स्थान की ओर संकेत नहीं है:

मार्कर

जब मैं थोड़ा उसे ज़ूम कर रहा हूँ आगे यह अपने गंतव्य तक पहुँच और यह सटीक स्थान की ओर इशारा करते है।

जब

मैं वास्तव में MapBox जीएल प्यार करता हूँ, लेकिन इस विशेष समस्या मुझे गुस्सा दिलाना है और मैं इसे कैसे हल करने के लिए पता करने के लिए अच्छा लगेगा। जब यह तय हो गई है मेरी कार्यान्वयन अधिक मूल मानचित्रण सॉफ्टवेयर मैं उपयोग कर रहा था से बेहतर है।

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


3 जवाब

वोट
1

मैं मेरी समस्या के लिए एक समाधान मिल गया है। यह कुछ हद तक hacky हो सकता है, लेकिन यह मार्कर की स्थिति समस्या का हल: मैं एक का उपयोग कर रहा पॉपअप एक फ़ॉन्ट भयानक मैप मार्कर आइकन के साथ इसे भरने और यह "स्टाइल टूलटिप" की सीमाओं को हटा दें:

जावास्क्रिप्ट:

map.on('load', function() {
    var container = document.createElement('div');
    var icon = document.createElement('i');
    icon.dataset.city = city;

    icon.addEventListener('click', function(e) {
        var city = e.target.dataset.city;
        var country = e.target.dataset.country
        flyTo(datacenters[country][city].coordinates);
    });

    icon.classList.add('fa', 'fa-map-marker', 'fa-2x');
    container.appendChild(icon);

    var popup = new mapboxgl.Popup({
            closeButton: false,
            closeOnClick: false
        })
        .setLngLat([
            datacenters[country][city].coordinates.lng,
            datacenters[country][city].coordinates.lat
        ])
        .setDOMContent(container)
        .addTo(map);
});

सीएसएस:

.map div.mapboxgl-popup-content {
    background: none;
    padding: 0;
}

.map .mapboxgl-popup-tip {
    display: none;
}

मैं तो बस उम्मीद है कि किसी को कोई वास्तविक समाधान के साथ आता है, क्योंकि यह मेरे लिए थोड़े गंदा लगता है। लेकिन हे: यह काम ठीक करता है!

04/08/2016 को 12:48
का स्रोत उपयोगकर्ता

वोट
9

MapBox जीएल जे एस 0.22.0 से आप मार्कर को एक ऑफसेट विकल्प निर्धारित कर सकते हैं। https://www.mapbox.com/mapbox-gl-js/api/#Marker

उदाहरण के मार्कर की भरपाई करने के लिए इतना है कि यह के लंगर बीच नीचे (अपना पिन मार्कर के लिए) है आप का प्रयोग करेंगे:

var marker = new mapboxgl.Marker(container, {
        offset: [-width / 2, -height]
    })
    .setLngLat([
        datacenters[country][city].coordinates.lng,
        datacenters[country][city].coordinates.lat
    ])
    .addTo(map);
10/08/2016 को 23:43
का स्रोत उपयोगकर्ता

वोट
0

- MapBox-gl.js v1.0.0 के लिए नए समाधान मार्कर वस्तुओं अब एक है anchor: स्थिति मार्कर के अक्षांश / Lng को संरेखित करने के लिए तय करने का विकल्प https://docs.mapbox.com/mapbox-gl-js/api/# निशान

var marker = new mapboxgl.Marker(container, {anchor: 'bottom');

यह ज्यादातर मामलों को कवर करना चाहिए और एक पिक्सेल मेरे अनुभव में ऑफसेट से ज्यादा विश्वसनीय है।

27/05/2019 को 11:49
का स्रोत उपयोगकर्ता

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