如何让Leaflet地图读取自定义输入框中的街道地址值？

完全可以实现，核心思路是给独立于地图的外部输入框绑定事件监听，拿到用户输入值后调用 Leaflet 内置方法执行搜索、定位等逻辑即可，无需依赖 Leaflet 自带的搜索控件。具体实现步骤如下：

• 第一步：在 HTML 中编写独立的外部输入框结构，和 Leaflet 地图容器完全分离即可：

<!-- 外部搜索区域，放在地图容器外的任意位置 -->
<div class="search-area">
  <input type="text" id="map-search-input" placeholder="请输入要搜索的地点">
  <button id="map-search-btn">搜索</button>
</div>
<!-- Leaflet 地图容器 -->
<div id="leaflet-map" style="width: 100%; height: 600px;"></div>

• 第二步：给输入框绑定事件，获取输入内容后调用对应的搜索逻辑，再操作 Leaflet 地图实例完成定位：

// 此处省略 Leaflet 地图初始化代码，假设你已经完成初始化，地图实例名为 map

// 获取外部输入框和按钮的DOM元素
const searchInput = document.getElementById('map-search-input')
const searchBtn = document.getElementById('map-search-btn')

// 绑定搜索按钮点击事件
searchBtn.addEventListener('click', () => {
  const searchKeyword = searchInput.value.trim()
  // 空内容直接返回
  if (!searchKeyword) return

  // 此处替换为你自己的搜索逻辑：可以调用第三方地理编码接口、匹配本地存储的坐标数据等
  // 示例：假设搜索后得到目标坐标为 北纬39.9度，东经116.3度
  const targetLatLng = [39.9, 116.3]
  
  // 调用 Leaflet 内置方法将地图定位到目标点，缩放层级可自定义
  map.panTo(targetLatLng, 13)
  // 可选：在目标位置添加标记点和弹窗
  L.marker(targetLatLng).addTo(map).bindPopup(searchKeyword).openPopup()
})

// 可选：绑定输入框回车事件，优化用户体验
searchInput.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    searchBtn.click()
  }
})

• 如果你需要输入联想、模糊匹配等能力，直接给外部输入框接入任意你需要的自动完成组件即可，无需和 Leaflet 控件做绑定，只需拿到最终输入值后操作地图实例即可。

内容的提问来源于stack exchange，提问作者mb932