可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I would like to display the address on dynamics CRM using MapBox API, i have used Google API and it works perfectly, but now i would like to display it using map box.

I have looked at the forward geo-location feature of Mapbox but it's not yet clear. So my variable my address variable will be coming from a field. e.g 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>

How can the address be displayed similar to that of google map on the Html Page.

回答1:

mapbox-gl-geocoder is a geocoder control for Mapbox GL JS, it's intended to provide a the user interface, that is, an input search box for searching on top of the Mapbox Geocoding API.

If you already have your query and just want to display that location on the map you're better to use the Mapbox JavaScript SDK with geocodeForward, see https://github.com/mapbox/mapbox-sdk-js#installation.

回答2:

The Console.Log was very helpful, I found out that the data.features.center returns the coordinates which was all what i needed . the full code is below

<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>