如何将第三方API获取的用户经纬度传入Mapbox以实现地图定位

嘿，我一眼就看出问题出在哪啦！你现在的代码有两个核心问题：

1. 异步操作顺序错误：fetch是异步请求，你把Mapbox地图的初始化写在fetch外面，这意味着地图初始化的时候，API返回的经纬度数据还没拿到呢，自然没法正确传入。
2. 语法错误：center: [{longitude}, {latitude}]这种写法完全不对，直接写变量名就行，不需要额外的大括号。

另外还有个小bug：你获取DOM元素的时候只写了document.getElementById('ipHere');，但没把结果赋值给变量，后续设置textContent的时候肯定会报错，我也一起帮你修正了。

下面给你两种可行的解决方案，选一个适合你的：

方案一：拿到数据后再初始化地图 #

这种方式适合你希望地图直接加载到用户位置，不需要显示默认地图的场景：

// 修正DOM元素赋值问题
const ipHere = document.getElementById('ipHere');
const countryHere = document.getElementById('countryHere');
const countryCode = document.getElementById('countryCode');
const countryFlag = document.getElementById('countryFlag');
const provider = document.getElementById('provider');

const api = 'https://api.ipdata.co/?api-key=a518de11479a7774cc93a2ff374998f2dc01b4c7dfdc7f40a3abfd2c';

fetch(api)
 .then(response => response.json())
 .catch(error => console.log(error))
 .then(data => {
  console.log(data);
  // 解构API返回的数据
  const {ip, country_name, country_code, emoji_flag, asn: {name}, latitude, longitude} = data;
  console.log(longitude, latitude);

  // 更新DOM内容
  ipHere.textContent = ip;
  countryHere.textContent = country_name;
  countryCode.textContent = country_code;
  countryFlag.textContent = emoji_flag;
  provider.textContent = name;

  // 现在拿到经纬度了，初始化Mapbox地图
  mapboxgl.accessToken = 'pk.eyJ1IjoiY2hhZmZleGQiLCJhIjoiY2tvb3JtZXkzMGVoOTJ6cGNzcnpiY3FhbyJ9.uw49z7s69q2Igcpi5sWcIQ';
  const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [longitude, latitude], // 直接传入经纬度变量，顺序是[经度, 纬度]
    zoom: 12,
  });
 });

方案二：先初始化默认地图，再平滑跳转至用户位置 #

这种方式用户体验更好，不会出现长时间的地图空白，等数据加载完成后会平滑过渡到用户位置：

// 修正DOM元素赋值问题
const ipHere = document.getElementById('ipHere');
const countryHere = document.getElementById('countryHere');
const countryCode = document.getElementById('countryCode');
const countryFlag = document.getElementById('countryFlag');
const provider = document.getElementById('provider');

// 先初始化一个默认位置的地图
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hhZmZleGQiLCJhIjoiY2tvb3JtZXkzMGVoOTJ6cGNzcnpiY3FhbyJ9.uw49z7s69q2Igcpi5sWcIQ';
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [0, 0], // 全球中心作为默认位置
  zoom: 2,
});

const api = 'https://api.ipdata.co/?api-key=a518de11479a7774cc93a2ff374998f2dc01b4c7dfdc7f40a3abfd2c';

fetch(api)
 .then(response => response.json())
 .catch(error => console.log(error))
 .then(data => {
  console.log(data);
  // 解构API返回的数据
  const {ip, country_name, country_code, emoji_flag, asn: {name}, latitude, longitude} = data;
  console.log(longitude, latitude);

  // 更新DOM内容
  ipHere.textContent = ip;
  countryHere.textContent = country_name;
  countryCode.textContent = country_code;
  countryFlag.textContent = emoji_flag;
  provider.textContent = name;

  // 用flyTo方法平滑跳转到用户位置，体验更好
  map.flyTo({
    center: [longitude, latitude],
    zoom: 12,
    essential: true // 确保辅助设备能识别这个操作
  });
 });

额外注意事项 #

• Mapbox的center参数顺序是**[经度, 纬度]**，别搞反了！
• 记得处理API请求失败的情况，比如在catch里给用户显示错误提示，或者让地图保持默认位置。
• 你的API密钥已经暴露在代码里了，生产环境下最好把请求代理到自己的服务器，避免密钥泄露。

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