个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
如何使用 MapBox SDk 正向地理编码功能在 HTML 页面上显示地址的位置。SDK 已经执行查询，但我需要能够在 html 上显示 map 及其位置。这是我的示例代码。
<html>
<head>
<meta charset="utf-8">
<title>MapBox</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.43.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.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="word-wrap: break-word;">
<script src='https://unpkg.com/mapbox@1.0.0-beta9/dist/mapbox-sdk.min.js'></script>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibGF3aXgxMCIsImEiOiJjamJlOGE1bmcyZ2V5MzNtcmlyaWRzcDZlIn0.ZRQ73zzVxwcADIPvsqB6mg';
console.log(mapboxgl.accessToken);
var client = new MapboxClient(mapboxgl.accessToken);
console.log(client);
var address = '6 Antares Drive, Ottawa, Ontario, K2E 6AE, Canada'
var test= client.geocodeForward(address, function(err, data, res) {
// data is the geocoding result as parsed JSON
// res is the http response, including: status, headers and entity properties
console.log(res);
console.log(res.url);
console.log(data);
console.log(err);
});
console.log(test);
// how do I display the address on the HTML?
</script>
</body>
</html>console.log(res.url) 为我提供了所需的网址，但如何显示 map 并向其添加标记。
最佳答案
您需要创建一个 <div>将保存您的 map 的标签。请参阅here for an example
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</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.43.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div> // this is the line you're looking for
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibGF3aXgxMCIsImEiOiJjamJlOGE1bmcyZ2V5MzNtcmlyaWRzcDZlIn0.ZRQ73zzVxwcADIPvsqB6mg';
var map = new mapboxgl.Map({
container: 'map', // id of the div you assigned above
style: 'mapbox://styles/mapbox/streets-v9', // stylesheet of basemap you want
center: [-74.50, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>
</body>
</html>关于javascript - 使用 MapBox java-script SDK 显示位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48066274/
26
4
0
刚刚通过 cocoapods 安装了 MapboxGL。我在我的 ViewController 中初始化它，就像给出的示例一样: @IBOutlet weak var mapViewWrapper:
有没有办法更改mapbox-gl-js图标图像的颜色？ 取自https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/的代码不会将标记颜色
我正在重写来自 Mapbox.js 的路线规划 Web 应用程序至 Mapbox GL JS图书馆。 几乎所有功能都已实现，但由于 的滞后、不流畅的动画和普遍的缓慢，它几乎无法使用。 map 层 .
我的问题是，如何从 MapBox 服务获取指定路线的海拔剖面图。 在输入中，我们将路径/路线作为坐标数组(纬度、经度)。作为结果，我们想要获得坐标对的数组 - 高程。 如果高程数据的分辨率高于提供的路
如何检查 map 上是否显示了 Mapbox 栅格图层？ 我的目标是停止加载动画。我知道我可以检查 map 本身是否准备就绪。 map.on('ready', someFunction) 除了针对特定
https://codepen.io/m12n/pen/XWNRZMg?editors=0010 mapboxgl.accessToken = "pk.eyJ1IjoiaW50ZWxsaWdlbm
我想在我的 map 上添加一个自定义标记。我正在使用 mapbox gl 脚本。 我发现与此主题相关的唯一文档是这个 https://www.mapbox.com/mapbox-gl-js/examp
我需要mapbox gl的某种Google map “空闲”事件。 当触发每个事件并且 map 停止放大/缩小拖动等并且每个图层都已加载时， map 处于空闲状态。 我必须使用此代码 map.on
有没有办法在离线设置中使用 Mapbox GL(询问 JS 和 native )？使用 MBTiles，您可以使用 MBTiles 文件或提取光栅图像。我想知道是否有任何类似的东西可以让 Mapbox
我有一个矩形，需要用正方形填充它。我找到中心线并想沿着该线放置方 block 。但是有没有简单的方法可以在 mapboxgl 中与 turfjs 等其他库一起绘制正方形？就像设置正方形的中心和边长并获
我对 MapBox 中的标记有疑问。我有多个标记，我想对其进行聚类。我使用 MapBox SDK for android。请帮我。非常感谢。 我在 Google Service Map Android
我建立了一个新的 react-native 项目并使用 yarn add @react-native-mapbox-gl/maps 添加了 Mapbox。 这个 Notice, that if you
我建立了一个新的 react-native 项目并使用 yarn add @react-native-mapbox-gl/maps 添加了 Mapbox。 这个 Notice, that if you
是否可以获取对应于 Mapbox 缩放级别的仪表列表？就像下面从 Bing map 中列出的一样:here 最佳答案 是的，就在 Mapbox 文档中: https://docs.mapbox.com
由于 Mapbox GL 文档没有讨论任何关于向 LngLat 坐标添加简单标记的内容，而且实际上只有关于如何添加自定义标记的文档，我希望有人能告诉我您应该如何获取 Mapbox-gl.js实际上为传
我有一个图层将 geojson 源中的点要素渲染为圆圈。以下是其中一项功能的示例: { type: 'Feature', properties: { color: 'red',
如何使用嵌套值以使用 case == 运算符？就像是: this.map.setPaintProperty("somelayer", "fill-color", ["case",
我正在使用 mapbox.js 制作带有地点的 map 。我只是想让 map 返回点击的正确坐标，我使用以下代码成功管理: map.on('click', function(e) { var
我在 style.load 事件上重绘图层并移除图层 map.on('style.load', function() { loadByBounds(tempBou
我正在努力实现更好的文本大小调整，相信通过插值，我也许能够将我当前的文本标签更新为更高效的格式。目前我们正在创建“静态文本”，本质上我们获得了特定缩放级别的理想文本大小，然后在每个缩放级别使用停止缩放
我是一名优秀的程序员,十分优秀！