代码之家 › 专栏 › 技术社区 › foufrix

从Mapbox地理编码器检索数据

mapbox-gl-js mapbox

foufrix · 技术社区 · 6 年前

我只需要mapbox地理编码自动完成,而不需要地图(将带有lat/lng的结果放入另一个请求中)

我设法把它完全单独放在没有地图的地方,用这个:

<template>
    <div id='geocoder' class='geocoder'></div>
</template>

<script>
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'
require('../../node_modules/@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css')

mapboxgl.accessToken = '<your access token here>';
var geocoder = new MapboxGeocoder({
    accessToken: mapboxgl.accessToken
    placeholder: 'Rechercher'
});
document.getElementById('geocoder').appendChild(geocoder.onAdd());
</script>

但现在我想检索数据(特别是lat/lng属性,以便将其保存在组件中并使用它)

我该怎么做我搜索了mapbox doc,但没有发现任何相关信息:/

提前感谢社区

2 回复 | 直到 6 年前

AndrewHarvey 6 年前

从api文档 https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#on 你可以用

geocoder.on('results', function(results) {
   console.log(results);
})

foufrix 6 年前

我终于找到了一种更便宜、更容易集成的替代方案:

https://community.algolia.com/places/documentation.html#using-npm

下面是简单的代码:

<template>
    <input type="search" id="address-input" placeholder="Where are we going?" />
</template>

<script>
import Places from 'places.js'

...
    mounted: function() {
        var placesAutocomplete = new Places({
            container: document.querySelector('#address-input')
        })
        placesAutocomplete.on('change', e => console.log(e.suggestion))
    }
</script>

推荐文章

Nomura Nori · 如何在移动仿真器中测试地图标题功能?

6 年前

derdida · Mapbox不隐藏特定缩放级别上的标记

6 年前

Rafael Silvério · Mapbox-导入“com.Mapbox.services.android.telemetry”包中的类时出错

6 年前

Serge Maslyakov · 如何从“MGLConstantStyleValue”迁移到“NSExpression”`

6 年前

woshitom · Mapbox GL js,通过变量图标有效地表示geojson源

6 年前

sametbilgi · 地图框清除管线多段线

6 年前

Pierre-Y Plourde · Mapbox自定义层未使用WebGL javascript库显示

6 年前

Anton Pilyak · 如何在MapBox GL JS中从GeoJson源绘制双线?

6 年前

tenprint · 从后台恢复应用程序后Mapbox SDK崩溃-上下文为null

6 年前

Shivam · 反应onPress工作所需的两个本机抽头

6 年前