कैसे जोड़ें मार्कर पर श्रोता "क्लिक" MapBox-जीएल-js में

वोट
2

मैं इस उदाहरण folowing उपयोग करके मानचित्र पर कुछ मार्करों कहा:

https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/

अब मैं जब उपयोगकर्ता मार्कर छवि पर क्लिक करता है पॉपअप दिखाना चाहते हैं, लेकिन मैं सुरुचिपूर्ण समाधान नहीं मिल रहा। कोई मदद?

16/07/2015 को 06:54
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


4 जवाब

वोट
6

विन्यास वस्तु में सच: शुरुआत के लिए, map.addLayer () फ़ंक्शन में आप शायद नक्शा करने के लिए मार्कर जोड़ने के लिए प्रयोग किया जाता है, तो आप "इंटरेक्टिव" सेट करना होगा।

map.addLayer({
                "id": "YOUR LAYER ID",
                "interactive": true,
                "type": "symbol",
                "source": "YOUR LAYER SOURCE",
                "layout": {
                  "icon-image": "YOUR LAYER ICON IMAGE",
                  "text-font": "Open Sans Semibold, Arial Unicode MS Bold",
                  "text-offset": [0, 0.6],
                  "text-anchor": "top"
                },
                "paint": {
                  "text-size": 12,
                  "icon-size": 1,
                  "icon-opacity": 0
                }
            });

उसके बाद, आप एक जांच के साथ-साथ अपने नक्शे पर एक क्लिक के हैंडलर स्थापित करने के लिए करता है, तो बात अपनी सुविधाओं (मार्कर) में से एक खत्म हो गया है देखने के लिए की जरूरत है।

map.on('click', function(e) {

    console.log(e);

      map.featuresAt(e.point, {radius: 100, layer: 'YOUR MARKER LAYER ID'}, function(err, features) {
            console.log(features[0]);

      });

    });

आपको कम से डॉक्स जांच कर सकते हैं अपनी वेबसाइट अधिक जानकारी के लिए। यदि आपको कोई समस्या है, तो मुझे बतायें।

03/09/2015 को 19:16
का स्रोत उपयोगकर्ता

वोट
1

नीचे दिए गए स्निपेट MapBox-जीएल-js उदाहरण से है: क्लिक पर एक पॉपअप प्रदर्शित करें

 map.on('click', function (e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['places'] });

    if (!features.length) {
        return;
    }

    var feature = features[0];
    //Use Feature and put your code
    // Populate the popup and set its coordinates
    // based on the feature found.
    var popup = new mapboxgl.Popup()
        .setLngLat(feature.geometry.coordinates)
        .setHTML(feature.properties.description)
        .addTo(map);
});

   // Use the same approach as above to indicate that the symbols are clickable
   // by changing the cursor style to 'pointer'.

map.on('mousemove', function (e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['places'] });
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
});
20/01/2017 को 10:34
का स्रोत उपयोगकर्ता

वोट
1

MapBox-जीएल-js की हाल ही में रिलीज को ध्यान में रखते। यह सीधे किया जा सकता है, बस मार्कर के साथ पॉपअप जोड़कर।

// create a simple popup.
var popup = new mapboxgl.Popup({offset: 25})
    .setText('Construction on the Washington Monument began in 1848.');

// create DOM element for the marker
var el = document.createElement('div');
el.innerHTML = "Marker1";
el.id = 'marker';

// create the marker
new mapboxgl.Marker(el, {offset:[-25, -25]})
    .setLngLat(monument)
    .setPopup(popup) // sets a popup on this marker
    .addTo(map);

आप आराम अपने खुद के डिजाइन किया पॉप-अप हो सकता है

var html = '<div class="marker-popup">I am a custom pop-up</div>';

var customPopUp = new mapboxgl.Popup(
    {
       anchor: 'bottom',   // To show popup on top
       offset: { 'bottom': [0, -10] },  // To prevent popup from over shadowing the marker.
       closeOnClick: false   // To prevent close on mapClick.
    }
).setHTML(html); // You can set any valid HTML.

संदर्भ के लिए https://www.mapbox.com/mapbox-gl-js/example/set-popup/

एक और उपयोगी सामग्री, मार्कर पर क्लिक करें घटना पर एक संलग्न करने के लिए, आप यह कर सकते जैसे मार्कर तत्व पर क्लिक करें घटना श्रोता संलग्न द्वारा

el.addEventListener('click', () => 
   { 
      alert("Marker Clicked.");
   }
); 
25/08/2017 को 17:19
का स्रोत उपयोगकर्ता

वोट
0

मैं भी यही समस्या थी, लेकिन मैं किसी HTML तत्व बनाए बिना एक समाधान मिल गया।

मैं खेतों में प्रयुक्त getElement()समारोह है कि वापसी मार्कर एक HTML तत्व की तरह है और बाद मैं क्लिक करें घटना देते हैं।

      this.service.getAllData().forEach(e => {
        // create MapBox Marker
        const marker = new mapboxgl.Marker().setLngLat([e.lon, e.lat]).addTo(this.map);
        // use GetElement to get HTML Element from marker and add event
        marker.getElement().addEventListener('click', () => {
          alert("Clicked");
        });
      });
23/11/2019 को 11:23
का स्रोत उपयोगकर्ता

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