如何將標記添加到MapBox GL JS地圖？

我試圖在HTML/Javascript地圖中添加一個標記到MapBox-GL-JS地圖。如何將標記添加到MapBox GL JS地圖？

我試圖建立一個小的例子：在這裏，你是我的代碼

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Test MapBox</title> 

    <!-- *** References for MapBox GL JS ... --> 
     <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script> 
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' /> 

    <style> 
     html, body { 
     min-height: 100%; 
     min-width: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     table { 
     width: 95vw; 
     height: 95vh; 
     } 
     td { 
     width: 50%; 
     height: 50%; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="maps-images"> 
    <center> 
     <table border=1> 
     <!-- second row --> 
     <tr id="row2"> 
     <td id="osm"> 
      <div id="osm_map" style="width:100%;height:100%"></div> 
     </td> 
     </tr> 
     </table> 
    </center> 
    </div> 

    <script> 
     mapboxgl.accessToken = '<PUT_YOUR_MAPBOX_KEY_HERE'; 
     // *** Create and configure the map ... 
     var osm_map = new mapboxgl.Map({ 
      container: 'osm_map', // container id 
      style: 'mapbox://styles/mapbox/bright-v9', //stylesheet location 
      center: [13.291408333333237,42.628386111111126], // starting position 
      zoom: 16 // starting zoom 
     }); 
     // *** Add zoom and rotation controls to the map ... 
     osm_map.addControl(new mapboxgl.NavigationControl()); 

     marker = new mapboxgl.Marker() 
     .setLngLat([13.291408333333237, 42.628386111111126]) 
     .addTo(osm_map); 

    </script> 
    </body> 
</html>

代碼工作正常，但沒有標記顯示在我的地圖....

建議/例子嗎？

來源

2017-05-26 Cesare

標記沒有任何默認樣式。您需要創建一個HTML元素並傳遞它。看例子here：

var el = document.createElement('div'); 
    el.className = 'marker'; 
    el.style.backgroundImage = 'url(https://placekitten.com/g/' + marker.properties.iconSize.join('/') + '/)'; 
    el.style.width = marker.properties.iconSize[0] + 'px'; 
    el.style.height = marker.properties.iconSize[1] + 'px'; 

    el.addEventListener('click', function() { 
     window.alert(marker.properties.message); 
    }); 

    // add marker to map 
    new mapboxgl.Marker(el, {offset: [-marker.properties.iconSize[0]/2, -marker.properties.iconSize[1]/2]}) 
     .setLngLat(marker.geometry.coordinates) 
     .addTo(map); 
});

來源

2017-06-02 00:18:58

我可以添加一個角度組件到HTML元素 – alehn96

如何將標記添加到MapBox GL JS地圖？

回答

相關問題