如何通过HTML表单获取地址，用Mapbox转坐标并显示地图及问题解决

一、修复request is not defined错误 #

你碰到的这个报错很明确：request是Node.js生态里的第三方HTTP请求库，浏览器原生环境根本不支持它。咱们直接用浏览器自带的fetch API替换就行，不用额外引入任何依赖，代码修改如下：

修改后的input.js（替换request为fetch） #

const addressForm = document.querySelector('form');
const searchInput = document.querySelector('input');

// 改写geocode函数，使用浏览器原生fetch
const geocode = (address, callback) => {
  // 编码地址，避免空格、逗号这类特殊字符破坏URL
  const encodedAddress = encodeURIComponent(address);
  const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodedAddress}.json?access_token=xxxxxxxxx&limit=1`;

  fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error('无法连接到位置服务！');
      }
      return response.json();
    })
    .then(data => {
      if (data.features.length === 0) {
        callback('找不到该位置，请尝试其他搜索词', undefined);
        return;
      }
      // 注意：Mapbox返回的center是[经度, 纬度]的顺序，别搞反
      callback(undefined, {
        longitude: data.features[0].center[0],
        latitude: data.features[0].center[1],
        locationName: data.features[0].place_name // 可选：返回解析后的完整地址名称
      });
    })
    .catch(error => {
      callback(error.message, undefined);
    });
};

addressForm.addEventListener('submit', (e) => {
  e.preventDefault();
  const location = searchInput.value.trim();
  if (!location) return;

  // 这里要补上回调函数！你之前调用geocode时漏传了，这也是潜在问题
  geocode(location, (error, result) => {
    if (error) {
      console.error(error);
      alert(error);
      return;
    }
    console.log('解析到的位置信息:', result);
    // 这里我们会把经纬度传递到地图文件，下面讲具体方法
    passLocationToMap(result.latitude, result.longitude);
  });
});

二、将经纬度传递到另一个地图文件 #

要把解析到的经纬度从input.js传到地图文件（比如map.js），有两种实用方案，根据你的项目结构选就行：

方案1：使用ES模块（推荐，现代前端标准） #

步骤1：修改HTML的script标签

把两个JS文件都声明为ES模块，添加type="module"属性：

<body>
  <div>
    <form>
      <input placeholder="Address">
      <button>Search</button>
    </form>
  </div>
  <!-- 先加载map.js，再加载input.js -->
  <script src="map.js" type="module"></script>
  <script src="input.js" type="module"></script>
  <!-- 别忘了加地图容器，要设置宽高 -->
  <div id="map" style="width: 100%; height: 400px; margin-top: 20px;"></div>
</body>

步骤2：在map.js中定义地图函数并导出

// map.js
let map;

// 初始化Mapbox地图的函数
export function initMap(latitude, longitude) {
  mapboxgl.accessToken = 'xxxxxxxxx'; // 你的Mapbox token
  map = new mapboxgl.Map({
    container: 'map', // 对应HTML里的地图容器ID
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [longitude, latitude], // Mapbox的center参数是[经度, 纬度]
    zoom: 12
  });

  // 在解析位置添加标记
  new mapboxgl.Marker()
    .setLngLat([longitude, latitude])
    .addTo(map);
}

// 可选：更新已有地图的位置
export function updateMapLocation(latitude, longitude) {
  if (!map) return;
  map.flyTo({
    center: [longitude, latitude],
    zoom: 12
  });
}

步骤3：在input.js中导入并调用函数

在input.js顶部添加导入语句，然后在回调里使用：

// input.js 顶部
import { initMap, updateMapLocation } from './map.js';

// 在geocode的回调里调用：
geocode(location, (error, result) => {
  if (error) {
    console.error(error);
    alert(error);
    return;
  }
  // 判断地图是否已初始化，避免重复创建
  if (!window.mapIsInit) {
    initMap(result.latitude, result.longitude);
    window.mapIsInit = true; // 标记地图已初始化
  } else {
    updateMapLocation(result.latitude, result.longitude);
  }
});

方案2：使用自定义事件（适合不想用ES模块的场景） #

如果你的项目不适合用ES模块，可以通过浏览器的自定义事件传递数据：

步骤1：在map.js中监听自定义事件

// map.js
let map;

// 监听自定义事件，接收经纬度
window.addEventListener('locationFound', (event) => {
  const { latitude, longitude } = event.detail;
  if (!map) {
    // 初始化地图
    mapboxgl.accessToken = 'xxxxxxxxx';
    map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v12',
      center: [longitude, latitude],
      zoom: 12
    });
  } else {
    // 更新地图位置
    map.flyTo({ center: [longitude, latitude], zoom: 12 });
  }
  // 添加位置标记
  new mapboxgl.Marker().setLngLat([longitude, latitude]).addTo(map);
});

步骤2：在input.js的回调中触发事件

// input.js的geocode回调里
geocode(location, (error, result) => {
  if (error) {
    console.error(error);
    alert(error);
    return;
  }
  // 触发自定义事件，传递经纬度数据
  const locationEvent = new CustomEvent('locationFound', {
    detail: {
      latitude: result.latitude,
      longitude: result.longitude
    }
  });
  window.dispatchEvent(locationEvent);
});

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