使用 MapBox java-script SDK 显示位置 [重复]答案

【问题标题】：Display Location with MapBox java-script SDK [duplicate]使用 MapBox java-script SDK 显示位置 [重复]
【发布时间】：2018-01-02 18:54:54
【问题描述】：

如何使用 MapBox SDK 转发地理编码功能在 HTML 页面上显示地址的位置。 SDK 已经进行了查询，但我需要能够在 html 上显示地图及其位置。这是我的示例代码。

<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) 为我提供了所需的 url，但如何显示地图并为其添加标记。

【问题讨论】：

标签： javascript html mapbox geocoding

【解决方案1】：

您需要制作一个<div> 标签来保存您的地图。见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>

【讨论】：

是的，我知道这一点，但我需要一个查询的地址，而不是 lng 和纬度。我发现 mapbox-gl-geocoder 旨在提供用户界面，也就是说，用于在 Mapbox Geocoding API 之上进行搜索的输入搜索框。如果您已经有查询并且只想在地图上显示该位置，则最好使用带有 geocodeForward 的 Mapbox JavaScript SDK。
啊，我明白了。我会相应地更新我的答案。
感谢我正在尝试在 microsoft dynamics crm 上显示地图。所以地址总是固定的，并不意味着交互
谢谢我终于想通了。