Console.Log был очень полезен, я обнаружил, что data.features.center возвращает координаты, и это было все, что мне было нужно. полный код ниже

ел бы отобразить адрес в динамической CRM с помощью MapBox API, я использовал Google API, и он отлично работает, но теперь я хотел бы отобразить его с помощью окна карты.

Я посмотрел на функцию прямого геолокации в Mapbox, но пока не ясно. Таким образом, моя переменная моя адресная переменная будет исходить из поля. например, var address = "6 Antares Drive, Оттава, Онтарио K2E 8A2, Канада";

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

Как можно отобразить адрес, похожий на адрес карты Google на странице HTML.

 RobLabs22 дек. 2017 г., 22:46
Подробности смотрите наstackoverflow.com/questions/38330100/... при кодировании компонента 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
 lawal yemi23 дек. 2017 г., 01:36
Спасибо, но, пожалуйста, это не сработало. Я пересмотрел html var test = "6 Anatares Drive, Оттава, ON, K2E 6AE, Канада"; адрес var = encodeURI (тест); var dataz = "api.mapbox.com/geocoding/v5/mapbox.places/..."" // После того, как стиль карты загружен на страницу, добавляем исходный слой и // стиль по умолчанию для отдельной точки. map.on ('load', function () {map.addSource ('single-point', {"type": "geojson", "data": dataz});
 lawal yemi23 дек. 2017 г., 01:33
Спасибо, но, пожалуйста, это не сработало для меня.

Ответы на вопрос(2)

Решение Вопроса

я обнаружил, что 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/[email protected]/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>

MapBox-л-геокодер это геокодерконтроль для Mapbox GL JS он предназначен для предоставления пользовательского интерфейса, то есть поля поиска ввода для поиска поверх API геокодирования Mapbox.

Если у вас уже есть запрос и вы хотите отобразить это местоположение на карте, лучше использоватьMapbox JavaScript SDK с участиемgeocodeForward, видетьhttps://github.com/mapbox/mapbox-sdk-js#installation.

 AndrewHarvey29 дек. 2017 г., 09:32
Mapbox-sdk-js обрабатывает кодировку URL. Получив результаты, вы можете добавить их на карту в виде символа, используя источник GeoJSON или HTML-маркер. В документах Mapbox GL JS есть примеры обоих.
 lawal yemi23 дек. 2017 г., 03:26
Спасибо, Эндрю, вы правы, но я не понимаю, как использовать SDK, так как это всего лишь отдельный веб-ресурс по динамике crm. так что мне просто нужно, это HTML-страница, которая может сделать запрос и отобразить результат, что-то вроде этой функцииmapbox.com/mapbox-gl-js/example/point-from-geocoder-result только без поиска
 AndrewHarvey29 дек. 2017 г., 09:31
Mapbox-sdk-js обрабатывает кодировку URL. Получив результаты, вы можете добавить их на карту в виде символа, используя источник GeoJSON или HTML-маркер. В документах Mapbox GL JS есть примеры обоих.
 AndrewHarvey23 дек. 2017 г., 12:46
Да, если вы посмотрите наgithub.com/mapbox/mapbox-sdk-js#installation есть пример использования его через тег script, чтобы вы могли использовать его на отдельной htms-странице.
 lawal yemi23 дек. 2017 г., 15:47
Спасибо, я вижу инициализацию, но не вижу дисплей. Также для адреса я должен кодировать, используя функцию encodeURI (), потому что это длинный адрес, содержащий почтовый индекс, город, провинцию и округ ... вместо 'Chester NJ' ..... но где адрес отображается с маркер.

Ваш ответ на вопрос