Mapbox是移动和Web应用程序的位置数据平台。它们提供构建块，以将基于位置的功能（例如地图，搜索和导航）添加到您创建的任何体验中。
我正在开发 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 = 遵循...
我正在尝试创建一个功能，用户可以单击国家/地区标记，地图将在 React 上放大到该国家/地区。然而，问题是不同国家的缩放级别不同......
使用 html2canvas 截屏 MapBox 创建黑色 jpg
我设法在硬盘上保存了使用 html2canvas 通过 Google Maps API 生成的地图的屏幕截图。我现在尝试使用 MapBox API 做同样的事情，我在硬盘上得到的只是一个
我正在使用 MapBox Directions API。它不适用于某些位置。 例如 https://api.mapbox.com/directions/v5/mapbox/drive-traffic/54.7124996,25.2623823;54.6813069,25.3061969?