Mapbox是移动和Web应用程序的位置数据平台。它们提供构建块，以将基于位置的功能（例如地图，搜索和导航）添加到您创建的任何体验中。
我在我的一个网络应用程序中使用MapBox，我的目标是在页面上渲染基本地图。 我有以下脚本： mapboxgl.accessToken = mapToken; const map = 新mapbo...</desc> <question vote="4"> <p>我在我的一个网络应用程序中使用 MapBox，我的目标是在页面上渲染基本地图。</p> <p>我有以下脚本：</p> <pre><code><script> mapboxgl.accessToken = mapToken; const map = new mapboxgl.Map({ container: 'map', // container ID style: 'mapbox://styles/mapbox/streets-v11', // style URL center: [-74.5, 40], // starting position [lng, lat] zoom: 9 // starting zoom }); </script> </code></pre> <p>为了显示地图，我使用：</p> <pre><code><div id='map' style='width: 400px; height: 300px;'></div> </code></pre> <p>问题是，当我尝试加载页面时，没有任何反应，并且出现以下错误： <em><strong>未捕获的引用错误：mapboxgl 未定义</strong></em></p> </question> <answer tick="true" vote="4"> <p>我通过添加以下内容解决了问题：</p> <pre><code><script src='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.js'></script> <link href='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.css' rel='stylesheet' /> </code></pre> <p>在 HTML 文件的头部。</p> </answer> <answer tick="false" vote="0"> <p>2022 更新</p> <p>这对我有用</p> <pre><code><script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css' rel='stylesheet' /> </code></pre> </answer> <answer tick="false" vote="0"> <p>如果您使用 <pre><code>block</code></pre> 库进行模板化，请将其添加到您的 pug 文件的 <pre><code>head</code></pre> <pre><code>pug</code></pre> 中。</p> <pre><code>script(src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js') link(href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet') </code></pre> </answer> <answer tick="false" vote="0"> <p>2024年更新</p> <p>v2.9.1 具有更高的安全性，需要准确的标头配置才能工作。在我的 Node js 和 Express 应用程序中，使用头盔设置 http 标头，这是对我有用的配置。</p> <pre><code>const helmet = require('helmet'); // ... app.use( helmet({ contentSecurityPolicy: { directives: { // ... other directives "script-src": [ "'self'", // allow scripts from your own domain "'unsafe-inline'", // allow inline scripts (you may want to remove this depending on your needs) "https://api.mapbox.com", // allow scripts from the Mapbox CDN ], "worker-src": [ "'self'", // allow web workers from your own domain "http://localhost:3000", // allow web workers from the current host (development environment) "https://api.mapbox.com", // allow web workers from the Mapbox CDN "blob:" // allow web workers from blob URLs ], "connect-src": [ "'self'", // allow connections to your own domain "https://api.mapbox.com", // allow connections to the Mapbox API "https://events.mapbox.com" // allow connections to Mapbox events ], }, }, }) ); // ... </code></pre> <p>请参考旧版本v0.54.0，使其运行无错误且无头文件配置。</p> </answer> </body></html>
Mapbox 导航 SDK v3（React Native 未初始化）
嗨，我正在 React Native (v0.73) 项目中将 Mapbox Navigation SDK v3 与 Android 一起使用。 我被困在视图文件中初始化 sdk 类 MapNavigationView(私有 val 上下文: ThemedReactC...
如何使用 Ionic、Capacitor 和 Angular 在应用程序关闭后在后台跟踪用户的位置？
我正在尝试使用 Ionic、Capacitor 和 Angular 开发移动应用程序。我想实现一项功能，即使在应用程序关闭后，我也可以在后台跟踪用户的位置。 我有
我正在开发 MapBoxgl，我想添加几个标记。 这是我的index.html： 我正在开发 MapBoxgl，我想添加几个标记。 这是我的index.html： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link href=" /assets/css/bootstrap.min.css " rel="stylesheet" /> <link href=" /assets/css/mapbox-gl.css " rel="stylesheet" /> <link href=" /assets/css/main.css " rel="stylesheet" /> </head> <body> <div id="map"></div> <script src="/assets/js/mapbox-gl.js"></script> <script src="/assets/js/map-style.js"></script> </body> </html> 这是map-style.js： var map = new mapboxgl.Map({ container: 'map', center: [57.3221, 33.5928], zoom: 5, style: style }); var geojson = { type: 'FeatureCollection', features: [{ type: 'Feature', geometry: { type: 'Point', coordinates: [30.61, 46.28] }, properties: { title: 'point 1', description: 'point 1 Description', message: 'point1', iconSize: [25, 25] } }, { type: 'Feature', geometry: { type: 'Point', coordinates: [30.62, 46.2845] }, properties: { title: 'point 2', description: 'point 2 Description', message: 'point 2', iconSize: [25, 25] } }] }; map.on('load', function () { // add markers to map geojson.features.forEach(function(marker) { // create a DOM element for the marker var el = document.createElement('div'); el.className = 'markers'; el.style.backgroundImage = 'url(assets/marker-azure.png)'; //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) .setLngLat(marker.geometry.coordinates) .addTo(map); }); }); 以下是与地图和标记相关的 main.css 部分： #map { position:absolute; top:0; bottom:0; width:100% } .markers { display: absolute; border: none; border-radius: 50%; cursor: pointer; padding: 0; } 所以，我的问题是，当我向标记添加宽度属性时，它们的图标可以正确显示（有点拉伸），但它们的坐标错误并在缩放时移动，如下图所示： 另一方面，如果宽度属性被消除，它们就在正确的位置，并且在缩放时不会移动，但它们非常拉伸，实际上与屏幕一样宽（下图）： 值得注意的是我使用了bootstrap。难道是这个原因吗？如果不是，那是什么问题？ 谢谢 import 'mapbox-gl/dist/mapbox-gl.css'; 添加 import css 对我有用。 我找到了解决方案并在这里与遇到此问题的其他人分享。该问题是由于使用了不是最新版本的库而引起的。升级到最新版本后，我可以解决这个问题。 请注意，当您使用 npm 时，有时会出现此类问题。确保库已完全下载并且是最新版本。 MapBox 的最新版本可以在这里找到。 有类似的问题，标记似乎在放大/缩小时改变了位置，通过设置偏移来修复它，想分享它是否可以帮助其他人，这里是fiddle // add marker to map var m = new mapboxgl.Marker(el, {offset: [0, -50/2]}); m.setLngLat(coordinates); m.addTo(map); （使用mapbox 1.13.0） 我遇到了类似的问题，弹出窗口没有显示，并且会根据缩放更改位置。 Mapbox 官方声明您需要包含 css 文件才能使标记和弹出窗口按预期工作。 https://docs.mapbox.com/mapbox-gl-js/guides/install/ 但是，您也可以将该 css 直接复制到组件中并将其用作元素。例如： export default function MarkerMapTest(props) { const mapContainer = React.useRef(null) const map = React.useRef(null) const elemRef = React.useRef(null) React.useEffect(() => { map.current = new mapboxgl.Map({ container: mapContainer.current, style: "mapbox://styles/mapbox/dark-v10", center: [151.242, -33.9132], zoom: 14, }) const marker = new mapboxgl.Marker({ element: elemRef.current, }) .setLngLat([151.242, -33.9132]) .addTo(map.current) }, []) return ( <div style={{ width: 600, height: 600, backgroundColor: "gray" }} ref={mapContainer} > <div style={{ width: 30, height: 30, borderRadius: 15, backgroundColor: "red", position: "absolute", // ! top: 0, // ! left: 0, // ! }} ref={elemRef} /> </div> 就我而言，我使用的 svg 在实际内容周围有一些空间。这样我就感觉标记在移动。一个简单的修复方法是删除内容周围的空间（例如，使用 inkscape 的“根据绘图或选择调整页面大小”选项：https://graphicdesign.stackexchange.com/a/21638） 在 svg 标记上设置 display: block 也很重要。请参阅：https://stackoverflow.com/a/39716426/11603006 这是因为样式未导入到您的代码中。只需在 index.html 的 head 标签中添加这一行 <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' /> 如果有人遇到这个错误，请尝试在顶部添加 CDN，这就是我修复我的问题的方法，它的工作原理就像一个魅力
有没有办法在没有访问令牌的情况下使用MapBox GL JS？我在 MapBox GL JS 的文档中找不到任何提示，但是，Uber 建议他们的库可以提供 React
我正在使用 Mapbox 开发一个 Android 应用程序，我应该根据从加速度计接收到的一些值来标记地图。我能够像这样放置标记 和这个 我尝试过...
JavaScript - 如何为红线绘制黑色轮廓（或描边） - leaflet mapbox
我尝试弄清楚如何使用填充颜色：红色和轮廓：黑色绘制线串。就像下图一样： 风格={ 填充颜色: 'rgb(255,0,0)', 大纲：'rgb(0,0,0)' 称重...
我使用 Mapbox Studio 创建了自己的 Mapbox 样式。 这个 GL JS 地图本身是在代码中导入的，如下所示： 让 selectedStyle = "mapbox://styles/abc/def"; 地图=新的mapboxgl.Map...
所有自定义图像都不会显示在 PointAnnotations 上 - React Native Mapbox - @rnmapbox/maps
尝试了网上找到的所有可能的解决方案，但我仍然遇到同样的问题，它只加载我尝试显示的 4 张图像中的 1 张图像。 我还尝试添加 setTimeOut <> {
使用“LongPress”事件，我尝试在 RNMapbox 地图上长按经度/纬度处设置地图图钉图像。当我长按某个区域时，我会记录控制台以确认...
在我的地图框样式中，我有一个用于数据点的自定义图标图像。即使在“位置”选项卡中 icon-allow-overlap 设置为 true，当缩小到 12 级或更高级别时，其中一个图标会隐藏......
我的风格： “字形”：“../resource/fonts/{fontstack}/{range}.pbf” //////////////////////////////// "text-font": [ "打开 Sans Regular"] 我只设置了一个字体文件，但是要求...
结合“match”和“interpolate”的mapbox表达式
我需要有关 React js 中的 Mapbox 表达式的帮助。 我需要根据“类型”参数自定义图层上线条的线宽， 我需要为四条道路中的每一条提供特殊的“线宽”行为
如何使用jetpack compose获取MAP BOX中的所有四个角坐标
我想获取所有角（topLeft，topRight，bottomLeft，bottomRight）坐标（Lat，Lng）这里是代码 地图框地图( 修改器 = Modifier.fillMaxSize(), mapInitOptionsFactor...
我在Youtube上看到了一个教程，有一个步骤，他们使用“AnnotationPluginImplKt”和“PointAnnotationManagerKt”。添加实现 'com.mapbox.navigation:android:2.17...
在mapbox中，可以使用setWheelZoomRate方法设置wheelZoomRate。如果ReactMapGL Map.如何才能达到同样的效果？ map.scrollZoom.setWheelZoomRate(1 / 600); 我尝试过设置wheelZoom...
在mapboxgl中使用离散颜色代替默认的插值颜色进行地图填充？
我通常看到的mapboxgl填充属性在等值线地图上的工作方式是这样的： map.on('加载', 函数 () { map.addSource('bb', { type: 'geojson', data: data,generateId...
我可以初始化地图并添加geojson多边形。但我无法根据所选选项更新不透明度。我能够检索这些值并计算每个
我已经安装了节点包@homee/react-native-mapbox-navigation，以便在我的react-native android应用程序中进行快速逐向导航，但是当我运行yarn android时，出现以下错误： > 配置项目...
所以我有一个问题，当我的缩放为5和8时，地图的某些部分有错误的图块（我的自定义图块的“基础”）。 渲染错误 我的代码： f = folium.Figure（宽度=4680，高度=4750） m = 遵循...