使用删除的标记和搜索查询初始化 mapBox 地图

Question

我设置了带有地理编码的地图框，这样用户就可以在 'Search' 框中输入内容，一旦选择了位置，就会在该位置放置一个标记。我希望在页面加载时已经将标记放在地图上，并且已经将搜索词输入到搜索框中（我有一个用户选择位置的设置，如果他们返回编辑页面我希望他们能够看到他们之前选择的位置）。这可能吗？

我的初始化代码是：

    initMap(lat, lng) {
      const mapboxgl = require('mapbox-gl/dist/mapbox-gl.js')
      mapboxgl.accessToken =
        'access_token'
      const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11?optimize=true',
        center: [lat, lng],
        zoom: 8,
        attributionControl: false,
      })
      const geocoder = new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        mapboxgl: mapboxgl,
      })
      map.addControl(geocoder)
      map.on('load', () => {
        geocoder.on('result', (result) => {
          const inputResult = result.result
          const coordinates = inputResult.geometry.coordinates
          const placeName = inputResult.place_name
          const lng = coordinates[0]
          const lat = coordinates[1]
          this.location = placeName
          this.latLng = [lat, lng]
        })
      })
    },

Answer 1

您可以使用 MapboxGeocoder#query in conjunction with Map#on and the 'load' event 指定搜索输入框中已显示的查询，并为其自动添加标记到地图中。例如，以下代码在输入字段中显示文本，并在地图加载时显示 "High Park" 的标记：

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-79.4512, 43.6568],
  zoom: 13
});

var geocoder = new MapboxGeocoder({
  accessToken: mapboxgl.accessToken,
  mapboxgl: mapboxgl
});

map.addControl(geocoder);

map.on('load', () => {
  geocoder.query('High Park');    
});

使用删除的标记和搜索查询初始化 mapBox 地图

Initialize mapBox map with dropped marker and search query

mapbox

mapbox-gl-js

mapbox-marker