【问题标题】:How to add dynamic markers in mapbox?如何在地图框中添加动态标记?
【发布时间】:2017-10-11 06:30:52
【问题描述】:

我想在 mapbox js 中显示动态标记。我在数据集中创建了动态标记。现在。我很困惑如何显示它们。 我想要这样的结果。 https://screenshots.firefox.com/yW9nHlICwVAbDLeF/api.mapbox.com

我目前的结果是。 https://screenshots.firefox.com/K1a5WVQHlxtFSIZY/null

提前致谢

【问题讨论】:

    标签: javascript mapbox mapbox-gl-js mapbox-gl mapbox-marker


    【解决方案1】:

    这很容易实现。我已经为你制作了一个代码示例。

    我建议对每个概念进行一些阅读以了解其工作原理。

    Mapbox JS 有一些优秀的文档可以帮助你。 https://www.mapbox.com/help/markers-js/#getting-started

    L.mapbox.accessToken = 'pk.eyJ1IjoiZGF2aWRiYXR0eSIsImEiOiJjajBqc2hqZ3YwMDN5MndvbDUxaDhoMDV6In0.w7sfrB5JeCH92sY-l0TQSg';
    var mapLeaflet = L.mapbox.map('map-leaflet', 'mapbox.light')
      .setView([53.801277, -1.548567],10);
    
    L.marker([53.801277, -1.54856]).addTo(mapLeaflet);
    L.marker([53.901277, -1.54856]).addTo(mapLeaflet);
    
    mapLeaflet.scrollWheelZoom.disable();
     body {
          margin: 0;
          padding :0;
        }
        .map {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
        }
    <link href="https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css" rel="stylesheet"/>
    <script src="https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js"></script>
    <div id='map-leaflet' class='map'> </div>

    【讨论】:

    • 感谢您的代码@RedCrusador,但我想根据它们的位置在数据集中显示不同的不同图标。
    • 使用 Mapbox JS 添加不同的图标非常简单。同样,您需要做一些研究并尝试自己解决这个问题mapbox.com/mapbox.js/example/v1.0.0/l-mapbox-marker 您只需要添加一个属性参数。
    • 你有什么例子吗?
    • 几分钟就能搞定。如果你不自己投入研究和努力去做这件事,你就不能指望人们为你做这项工作。试一试,如果您遇到困难,请发布一个代码示例。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-09-23
    • 2020-03-31
    • 1970-01-01
    相关资源
    最近更新 更多