使用MapBox java-script SDK显示位置 [英] Display Location with MapBox java-script SDK
本文介绍了使用MapBox java-script SDK显示位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何使用MapBox SDk转发地理编码功能在HTML页面上显示地址的位置。
SDK已经完成了查询，但我需要能够通过html上的一个点来显示地图及其位置。
这里是我的示例代码。
< html>< ; HEAD> < meta charset =utf-8> <标题> MapBox< /标题> < meta name =viewportcontent =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 =stylesheet> <风格> body {margin：0;填充：0; } #map {position：absolute;顶部：0;底部：0;宽度：100％; }< / head>< body style =word-wrap：break-word;>< script src ='https：//unpkg.com/mapbox@1.0.0-beta9/ DIST / mapbox-sdk.min.js'>< /脚本><脚本> mapsetgl.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（地址，函数（err，data，res）{//数据是经过解析的地理编码结果JSON // res是http响应，包括：状态，标题和实体属性console.log（res）; console.log（res.url）; console.log（data）; console.log（err）;}）; < / script>< / body>< / html> console.log（res.url）为我提供了所需的url，但是如何显示地图并为其添加标记。
<！DOCTYPE html>< html>< head> < meta charset ='utf-8'/> < 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'/> <风格> body {margin：0;填充：0; } #map {position：absolute;顶部：0;底部：0;宽度：100％; }< / head>< body>< div id ='map'>< / div> //这是你正在寻找的线< script> mapboxgl.accessToken ='pk.eyJ1IjoibGF3aXgxMCIsImEiOiJjamJlOGE1bmcyZ2V5MzNtcmlyaWRzcDZlIn0.ZRQ73zzVxwcADIPvsqB6mg'; var map = new mapboxgl.Map（{container：'map'，// //您在上面指定的div的id style：'mapbox：// styles / mapbox / streets-v9'，//你想要的底图样式表中心：[-74.50,40]，//起始位置[lng，lat]缩放：9 //开始缩放}） ;< / script>< / body>< / html>
How do I display location of an address on an HTML page using MapBox SDk forward Geo-Coding function. The SDK already does the query, but I need to be able to display the map and its location with a point on the html. here is my sample code.
<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) gives me the desired url but how do I display the map and add a marker to it.
解决方案
You need to make a <div> tag that will hold your map. See 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>
这篇关于使用MapBox java-script SDK显示位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
