在 html 中使用 MapBox 进行地理定位答案

【问题标题】：Using MapBox for Geolocation in html在 html 中使用 MapBox 进行地理定位
【发布时间】：2018-06-05 07:40:38
【问题描述】：

我想使用 MapBox API 在动态 CRM 上显示地址，我使用过 Google API 并且运行良好，但现在我想使用地图框显示它。

我查看了 Mapbox 的前向地理位置功能，但还不清楚。所以我的变量我的地址变量将来自一个字段。例如 var address = "6 Antares Drive, Ottawa, Ontario K2E 8A2, Canada";

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Add a geocoder</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>

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.1/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.1/mapbox-gl-geocoder.css' type='text/css' />
<div id='map'></div>

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibGF3aXgxMCIsImEiOiJjamJlOGE1bmcyZ2V5MzNtcmlyaWRzcDZlIn0.ZRQ73zzVxwcADIPvsqB6mg';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-79.4512, 43.6568],
    zoom: 13
});

var address = "6 Antares Drive, Ottawa, Ontario K2E 8A2, Canada";

var geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken });
geocoder.query(address); // how do i search and display this address
map.addControl(geocoder);

//map.addControl(new MapboxGeocoder({
 //   accessToken: mapboxgl.accessToken
//}));

</script>
</body>
</html>

如何在Html页面上显示类似google map的地址。

【问题讨论】：

在对 URI 组件进行编码产生 curl https://api.tiles.mapbox.com/geocoding/v5/mapbox.places/6%20Antares%20Drive%2C%20Ottawa%2C%20Ontario%20K2E%208A2%2CCanada.json?access_token=pk.eyJ1IjoibGF3aXgxMCIsImEiOiJjamJlOGE1bmcyZ2V5MzNtcmlyaWRzcDZlIn0.ZRQ73zzVxwcADIPvsqB6mg 时，请参阅 stackoverflow.com/questions/38330100/… 的详细信息
谢谢，但它对我不起作用。
谢谢，但它没有用。我已经修改了 html var test = "6 Anatares Drive, Ottawa, ON , K2E 6AE, Canada"; var address = encodeURI(test); var dataz= "api.mapbox.com/geocoding/v5/mapbox.places/…"" // 地图样式加载到页面后，添加源图层和默认样式 // 单个点的样式。map.on('load', function() { map.addSource ('单点', { "type": "geojson", "data": dataz });

标签： javascript html mapbox mapbox-gl-js

【解决方案1】：

mapbox-gl-geocoder 是 Mapbox GL JS 的地理编码器控件，旨在提供用户界面，即在 Mapbox Geocoding API 之上用于搜索的输入搜索框。 p>

如果您已经有查询并且只想在地图上显示该位置，您最好使用Mapbox JavaScript SDK 和geocodeForward，请参阅https://github.com/mapbox/mapbox-sdk-js#installation。

【讨论】：

谢谢 Andrew，你是对的，但我不明白如何使用 SDK，因为它只是动态 crm 上的独立网络资源。所以我只需要一个 html 页面，它可以进行查询并显示类似于此功能 mapbox.com/mapbox-gl-js/example/point-from-geocoder-result 的结果，而无需搜索
是的，如果您查看github.com/mapbox/mapbox-sdk-js#installation，有一个通过脚本标签使用它的示例，因此您可以在独立的 htms 页面上使用它。
谢谢，我可以看到初始化，但我看不到显示。对于地址，我是否必须使用 encodeURI() 函数进行编码，因为它是一个包含邮政编码、城市、省和县的长地址......而不是“Chester NJ”......但是显示的地址在哪里？标记。'
mapbox-sdk-js 处理 URL 编码。获得结果后，您可以使用 GeoJSON 源或 HTML 标记将其作为符号添加到地图中。 Mapbox GL JS 文档有这两个例子。
mapbox-sdk-js 处理 URL 编码。获得结果后，您可以使用 GeoJSON 源或 HTML 标记将其作为符号添加到地图中。 Mapbox GL JS 文档有这两个例子。

【解决方案2】：

Console.Log 非常有用，我发现 data.features.center 返回的坐标正是我所需要的。完整代码如下

<html>

<head>
  <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;">
  <div id='map'></div>
  <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 = 't5h 0k7'
    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);

      var coordinates = data.features[0].center;

      var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v10',
        center: coordinates,
        zoom: 14
      });
      new mapboxgl.Marker()
        .setLngLat(coordinates)
        .addTo(map);


    });
  </script>

</body>

</html>

【讨论】：