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マップにマーカーを追加するにはどうすればよいですか？

答えて

関連する問題