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

Question

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

我的初始化代码是：

    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 与Map#on 和'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');    
});