如何将lat/lng坐标成对存入Google Maps数组以生成地图标记？

我明白你的问题啦——你现在应该是把每个纬度和经度都当成独立元素塞进数组里了，结果得到的是一串零散的数值，而不是[纬度, 经度]这样的成对组合对吧？别担心，用数组的map方法（或者forEach）就能轻松解决这个问题。

假设你的HTML结构是这样的： #

<!-- 带有经纬度数据属性的div -->
<div class="map-marker" data-lat="40.7128" data-lng="-74.0060"></div>
<div class="map-marker" data-lat="34.0522" data-lng="-118.2437"></div>
<div class="map-marker" data-lat="41.8781" data-lng="-87.6298"></div>

方法1：用map快速生成坐标对数组（推荐） #

map方法可以直接遍历元素并返回新的数组，非常适合这种场景：

// 选中所有带有有效经纬度数据属性的div
const markerElements = document.querySelectorAll('.map-marker[data-lat][data-lng]');

// 转换成由坐标对组成的二维数组
const markerCoordinates = Array.from(markerElements).map(element => {
  // 把字符串类型的经纬度转换成数字（必须步骤，避免Google Map识别错误）
  const lat = parseFloat(element.dataset.lat);
  const lng = parseFloat(element.dataset.lng);
  // 返回单个坐标对数组
  return [lat, lng];
});

console.log(markerCoordinates);
// 输出结果：[[40.7128, -74.0060], [34.0522, -118.2437], [41.8781, -87.6298]]

方法2：用forEach手动构建数组 #

如果你更习惯手动遍历的方式，forEach也能实现同样的效果：

const markerCoordinates = [];

document.querySelectorAll('.map-marker[data-lat][data-lng]').forEach(element => {
  const lat = parseFloat(element.dataset.lat);
  const lng = parseFloat(element.dataset.lng);
  // 把成对的经纬度作为子数组push进主数组
  markerCoordinates.push([lat, lng]);
});

额外优化：直接生成Google Map标记对象 #

如果你不需要单独的坐标数组，而是想直接生成标记实例，也可以在遍历的时候直接创建：

// 假设你已经初始化了地图实例，存在yourMap变量中
const yourMap = new google.maps.Map(document.getElementById('map'), {
  center: { lat: 40.7128, lng: -74.0060 },
  zoom: 8
});

const markers = Array.from(markerElements).map(element => {
  const lat = parseFloat(element.dataset.lat);
  const lng = parseFloat(element.dataset.lng);
  return new google.maps.Marker({
    position: { lat, lng },
    map: yourMap,
    // 可以在这里添加其他标记属性，比如title
    title: element.dataset.markerTitle || '默认标记'
  });
});

关键注意点 #

• 一定要把dataset获取到的字符串转换成数字（用parseFloat），否则Google Map的API可能无法正确识别坐标。
• 选择器里加上[data-lat][data-lng]可以过滤掉缺少经纬度属性的div，避免出现NaN的情况。

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