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

Question

我正在嘗試在HTML / Javascript地圖中為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>

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

建議/例子？

Answer 1

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

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);
});

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

問題描述

1 個解決方案

解決方案1
2 2017-06-02 00:18:58

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

問題描述

1 個解決方案

解決方案1 2 2017-06-02 00:18:58

解決方案1
2 2017-06-02 00:18:58