2016-08-22 2 views
0

Я использую API-интерфейс mapbox-gl для создания вида в виде карты с всплывающим окном. Я хотел бы знать, как я могу показать свои координаты (birdLocation переменных) в качестве адреса, как это: Нью-Йорк, NY 11208mapbox-gl: Показать результаты обратного геокодирования во всплывающем окне?

renderMap() { 
    if (this.props.bird.location) { 
     let birdLocation = this.props.bird.location; 
     let map = new mapboxgl.Map({ 
      container: 'mapbox-container', 
      style: config.mapbox.style, 
      center: birdLocation, 
      zoom: 13, 
      interactive: false, 
      preserveDrawingBuffer: true 
     }); 
     let popup = new mapboxgl.Popup() 
      .setLngLat(birdLocation) 
      .setHTML(
       '<div class="location-popup location-title">BIRD LOCATION</div><div class="location-popup location-address">' + {birdLocation} + '</div><a href="/trips" class="location-popup location-plan">PLAN A TRIP</a>' 
      ) 
      .addTo(map); 

     map.on('load', function() { 
      map.addSource("points", { 
       "type": "geojson", 
       "data": { 
        "type": "FeatureCollection", 
        "features": [{ 
         "type": "Feature", 
         "geometry": { 
          "type": "Point", 
          "coordinates": birdLocation 
         }, 
         "properties": { 
          "icon": "dark-map-pin" 
         } 
        }] 
       } 
      }); 

      map.addLayer({ 
       "id": "points", 
       "type": "symbol", 
       "source": "points", 
       "layout": { 
        "icon-image": "{icon}" 
       } 
      }); 
     }); 
    } 
}, 

ответ

1

Что вы ищете обратную геокодирования, которая превращает координату, как birdLocation, в имя и/или адрес. Вот Mapbox's API for reverse geocoding, который вы можете использовать с любой библиотекой AJAX, чтобы получить результат.

раскрытие: я работаю в MapBox

+0

Я посмотрел реверсного геокодирования в API, идея, как я могу напечатать местоположение с помощью его? – eclipsis

+0

См. Формат ответа https://www.mapbox.com/api-documentation/#response-format - местоположение будет находиться в 'response.features [0] .place_name'. Вы получите ответ, найдите там место и интерполируйте его. – tmcw

+0

Не могли бы вы помочь мне создать пример? До сих пор у меня есть это: 'let mapboxGeocoder = new Geocoder()' – eclipsis

Смежные вопросы