标签: mapbox

使用 Mapbox GL JS API 未出现标记

我正在关注这些文档，但下面的代码没有呈现标记。任何想法为什么？

mapboxgl.accessToken = "pk.eyJ1IjoiZGlsbHBpeGVsIiwiYSI6ImNqM3A1YWV4czAwa3cyd3BmeWR4OTJ4NGEifQ.atNs-3fdoNghDcrdKwtIkA";
var map = new mapboxgl.Map({
  container: "map",
  center: [-74.50, 40],
  zoom: 6,
  scrollZoom: false,
  style: "mapbox://styles/mapbox/light-v9",
});
map.addControl(new mapboxgl.NavigationControl(), "top-left");
var marker = new mapboxgl.Marker().setLngLat([-74.50, 40]).addTo(map);

Run Code Online (Sandbox Code Playgroud)

#map {
  height: 320px;
}

Run Code Online (Sandbox Code Playgroud)

<link href="//api.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.css" rel="stylesheet"/>
<script src="//api.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.js"></script>
<div id="map"></div>

Run Code Online (Sandbox Code Playgroud)

mapbox mapbox-gl

Dav*_*nes

2017 06-10

2
推荐指数

1
解决办法

5306
查看次数

在 Mapbox Studio 中增加多边形的笔触宽度

显然，“stroke-width”属性固定在 1px 并且无法更改。有什么解决方法吗？

mapbox

Jay*_*Jay

lucky-day

2
推荐指数

1
解决办法

2655
查看次数

如何在 React-Mapbox-GL 中获得当前缩放？

如何在 react mapbox gl 中获取当前地图的缩放比例？

包：https : //github.com/alex3165/react-mapbox-gl/tree/0df46b1dcf194cdf140638f653221d8a82f0b195

我已经尝试过“如何开始”中的示例来使用getZoom方法，Map但它不起作用。我有错误 Map.getZoom 不是函数。

编辑 ================

当我尝试通过 refs 访问它时，我遇到了类似屏幕截图的问题。如何获得具有我的 getZoom 功能的 .state.map.e？

javascript zooming mapbox reactjs

Sky*_*n R

2017 11-17

2
推荐指数

1
解决办法

2873
查看次数

如何预填充地图框方向 api 的起点和终点？

我有：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Display driving directions</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.3/mapbox-gl-directions.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.3/mapbox-gl-directions.css' type='text/css' />
<div id='map'></div>

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYndhZGFtc29uIiwiYSI6ImNqajZhNm1idDFzMjIza3A2Y3ZmdDV6YWYifQ.9NhptR7a9D0hzWXR51y_9w';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-79.4512, 43.6568],
    zoom: 13
});

map.addControl(new MapboxDirections({
    accessToken: mapboxgl.accessToken
}), 'top-left');
</script>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

这给了我一个很好的带有行车路线的地图，但我想在渲染的地图中预填充“起始地点”和“目的地”。我如何通过 javascript 做到这一点，以便用户不必两次输入他们的信息？

javascript maps mapbox mapbox-gl mapbox-gl-js

use*_*084

lucky-day

2
推荐指数

1
解决办法

1352
查看次数

Mapbox：使用 fitBounds Re-Centers Map 后缩小一级

我正在使用 Mapbox GL JS 并根据他们的商店定位器演示创建了一个动态商店定位器。我正在使用 fitBounds 在地图的初始显示中包含所有商店标记。

问题是，它放大得太近，地图需要一些填充。所以，我试图将缩放级别降低一级。问题是，当我获得缩放级别并返回缩放级别时，地图会重新居中到地图的原始中心。

我在下面包含了代码，我尝试将中心重置为 fitBounds 中心，但它不起作用。知道我做错了什么吗？

var bounds = new mapboxgl.LngLatBounds();
$(markers).each(function() {
    var features = $(this);
    bounds.extend(features[0].geometry.coordinates);        
});

map.fitBounds(bounds);
var mapLat = map.getBounds().getCenter().lat;
var mapLong = map.getBounds().getCenter().long;
map.setCenter = (mapLat, mapLong);
var mapZoom = map.getZoom();
newZoom = mapZoom - 1;  
map.setZoom(newZoom);

Run Code Online (Sandbox Code Playgroud)

javascript mapbox mapbox-gl-js

Chi*_*rge

lucky-day

2
推荐指数

1
解决办法

3917
查看次数

获取地图框地图范围内的标记列表

我试图让所有标记都在地图范围内。当用户与地图交互（放大/缩小、移动、单击）时，我希望获取地图边界内的所有标记以显示这些标记的列表。

我尝试实现这个例子的一些功能，但没有任何运气：https : //www.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/

这是 codepen 上地图的工作版本：https ://codepen.io/anon/pen/MPGgWq

我查看了它在特征和边界中返回的内容，但这些信息都没有帮助我实现这一目标。我正在使用标记，因此我可以显示自定义标记图像并设置出现在弹出框中的描述。

map.on('moveend', function (e) {
    var features =  map.queryRenderedFeatures();
    var bounds = map.getBounds();

    console.log(features);
    console.log(bounds);
});

Run Code Online (Sandbox Code Playgroud)

html javascript markers mapbox mapbox-gl-js

Bra*_*rad

lucky-day

2
推荐指数

1
解决办法

5280
查看次数

使用 Mapbox-GL.JS 沿路线设置多个点的动画

我在使用以下示例时遇到问题：
沿路线设置点动画我想要实现的是在同一个地图容器中制作另一个点和路线。
到目前为止我尝试的是这个

mapboxgl.accessToken = 'pk.eyJ1IjoicGFwYWJ1Y2t0IiwiYSI6ImNqa2k3azQ1dzA1Zmgza3B1czIxOGhhaW4ifQ.h5OT3NaQf0vcxx3g1q1cXw';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [118.0148634, -2.548926],
    zoom: 4.1
});
var route = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                   [117.66769409179686,3.2913401805277034],[117.75009155273438,3.2419820359767444],
                   [117.81188964843751,3.2008484073844365],[117.93273925781249,3.1514858749293237],
                   [118.048095703125,3.0637245031869744],[118.20190429687501,2.9649843693339677],
                   [118.35571289062499,2.855262784366583],[118.443603515625,2.789424777005989],
                   [118.597412109375,2.67419944615503],[118.817138671875,2.4656692707025543],
                   [118.93798828125,2.191238104506552],[118.97644042968749,1.9442068658308456],
                   [119.0643310546875,1.6477220517969353],[119.13574218749999,1.334718132769963],
                   [119.15222167968751,1.0051974541602744],[119.05334472656249,0.5987439850125229],
                   [118.9215087890625,0.29113644247137116],[118.8006591796875,-0.027465819260582135],
                   [118.597412109375,-0.5163504323777461],[118.27880859375001,-0.8953492997435784],
                   [118.16894531249999,-1.219390359762202],[117.83935546874999,-1.6641946615712557],
                   [117.7349853515625,-1.8618548574369598],[117.65258789062499,-2.0485136203038063],
                   [117.40539550781249,-2.67968661580376],[117.07580566406249,-3.2721456350750127],
                   [116.7572021484375,-3.8806964824972487],[116.44958496093749,-4.209464815163466],
                   [115.7574462890625,-4.335456463573485],[115.213623046875,-4.510714125698484],
                   [114.6533203125,-4.647604837557583],[114.1864013671875,-4.70235372255946],
                   [113.79089355468749,-4.7242520745232515],[113.4228515625,-4.8118385341739005],
                   [112.9669189453125,-4.8282597468669755],[112.28576660156249,-4.844680562025358],
                   [111.104736328125,-4.855627550617055],[110.7366943359375,-4.855627550617055],
                   [110.19287109375,-4.855627550617055],[109.60510253906249,-4.926778627933801],
                   [109.00634765625,-5.00339434502215],[108.4075927734375,-5.036226914872183],
                   [108.116455078125,-5.189423479732417],[107.5177001953125,-5.369928743247035],
                   [107.061767578125,-5.473831889192786],[106.76513671875,-5.544913134097361],
                   [106.44653320312499,-5.626919311742117],[106.248779296875,-5.747174076651375],
                   [106.1444091796875,-5.807291968003861],[106.02948188781738,-5.882003409958776]
                ]
            }
        },
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
                "type": "LineString",
                "coordinates": [
                      [-252.99316406250003,-5.932972207945653],[-252.92724609374997,-5.774501181937723],
                      [-252.872314453125,-5.697981985463135],[-252.8118896484375,-5.572249801113899], …

Run Code Online (Sandbox Code Playgroud)

html javascript maps mapbox mapbox-gl-js

Bak*_*aya

2018 10-22

2
推荐指数

1
解决办法

2460
查看次数

如何获取用户的当前位置？

我正在设置一张地图，该地图将使商店位置更接近用户的当前位置。但我无法做到这一点。我浏览了文档，但找不到任何对我的问题有帮助的信息。我想要什么如果我单击“查找位置”，它应该会显示离我较近的商店。

我已经尝试过放置静态经度和纬度，并且效果很好。我希望它是动态的。

mapboxgl.accessToken = 'THE_ACCESS_TOKEN';

// This adds the map to your page

var map = new mapboxgl.Map({
// container id specified in the HTML
  container: 'map',

   // style URL
  style: 'mapbox://styles/mapbox/light-v10',

 // initial position in [lon, lat] format
  center: [78.3430302, 17.449968],

 // initial zoom

 zoom: 14
});

Run Code Online (Sandbox Code Playgroud)

在中心，我想要动态的经度和纬度值（当前位置）。这样它就会向我显示离我所在位置更近的商店。

javascript api mapbox mapbox-gl mapbox-gl-js

Sum*_*yan

2021 05-19

2
推荐指数

1
解决办法

6982
查看次数

如何在 Mapbox GL JS 中通过缩放级别设置 map.loadImage 可见性？

我正在使用以下代码加载图像：

map.on('load', function () {

map.loadImage('....png', function(error, image) { 
  if (error) throw error;
  map.addImage('b7', image);
  map.addLayer({ 
    "id": "b7",
    "type": "symbol",
    "source": { 
      "type": "geojson",
      "data": {
        "type": "FeatureCollection",
        "features": [{
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [0, 0] 
          } 
        }] 
      }
    },
    "layout": {
      "icon-image": "b7",
      "icon-size": 0.2
    }
  });
});

Run Code Online (Sandbox Code Playgroud)

在某个缩放级别，如何将可见性设置为无？

看起来您不能在 loadImage 上使用 map.setLayoutProperty。在控制台中，它显示：错误：地图样式中不存在图层“b7”且无法设置样式。

乳清我尝试类似的东西：

map.setLayoutProperty( 'b7', 'visibility', 'none' );

Run Code Online (Sandbox Code Playgroud)

有任何想法吗？

mapbox mapbox-gl-js

use*_*913

lucky-day

2
推荐指数

1
解决办法

1049
查看次数

Mapbox - 完全禁用聚类

我已经开始使用 Mapbox，并且一切都按照我的意愿工作，只是我无法弄清楚如何禁用集群。这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Add custom icons with Markers</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

    <style>
        .marker {
            /*display: block;*/
            border: none;
            /*border-radius: 50%;*/
            cursor: pointer;
            padding: 0;
            background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Map_pin_icon.svg/176px-Map_pin_icon.svg.png');
            background-size: cover;
            width: 20px;
            height: 27px;
            /*border-radius: 50%;*/
            /*cursor: pointer;*/
        }
    </style>

    <div id='map'></div>

    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoibmFiZWxla3QiLCJhIjoiY2p4ZXVubnQwMGVmcTN6cGU0c3JpZmM2diJ9.peecDCcSljWhChxCknv7AQ';

        var coordinates = [
            [6.73579, 78.72300],
            [2.70886, …

Run Code Online (Sandbox Code Playgroud)

mapbox mapbox-gl-js

nab*_*ekt

2019 07-05

2
推荐指数

1
解决办法

1288
查看次数