如何基于数据对象在Google Map中设置多个标记？附相关代码

阿华AIGC实验室

2026-5-25

在Google Maps中添加多个标记的完整实现

Hey，看起来你已经搭好了Google Maps的基础框架，只需要补全标记创建的逻辑，就能把所有点位都展示在地图上啦！下面是针对你的数据的完整解决方案，包括处理locations数组里的点位，以及res对象中的出发地和目的地：

实现步骤与代码

首先，我们需要遍历locations数组生成标记，再单独处理出发地和目的地（可以给它们设置不同的标识来区分），最后还可以让地图自动调整视野，确保所有标记都能被看到。

// 你的原始数据
var locations = [ [-33.890542, 151.274856, 4], [-33.923036, 151.259052, 5] ]; 
var res = { 
  destination: {lat: -6.3207993, lng: 106.7261287},
  departure: {lat: -6.170885, lng: 106.813184} 
};

// 初始化地图（你的原有代码，保持不变）
var map = new google.maps.Map(document.getElementById('map'), { 
  zoom: 10, 
  center: new google.maps.LatLng(-33.92, 151.25), 
  mapTypeId: google.maps.MapTypeId.ROADMAP 
});

// 1. 遍历locations数组，为每个点位创建标记
var marker;
for (let i = 0; i < locations.length; i++) { 
  marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][0], locations[i][1]),
    map: map,
    title: `点位 ${locations[i][2]}` // 用数组第三个值作为标记标题，鼠标悬停时显示
  });
}

// 2. 创建出发地标记，用绿色图标区分
var departureMarker = new google.maps.Marker({
  position: new google.maps.LatLng(res.departure.lat, res.departure.lng),
  map: map,
  title: '出发地',
  icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
});

// 3. 创建目的地标记，用红色图标区分
var destinationMarker = new google.maps.Marker({
  position: new google.maps.LatLng(res.destination.lat, res.destination.lng),
  map: map,
  title: '目的地',
  icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
});

// 可选：自动调整地图视野，让所有标记都显示在当前视图内
var bounds = new google.maps.LatLngBounds();
// 把所有点位加入视野范围
locations.forEach(loc => bounds.extend(new google.maps.LatLng(loc[0], loc[1])));
bounds.extend(new google.maps.LatLng(res.departure.lat, res.departure.lng));
bounds.extend(new google.maps.LatLng(res.destination.lat, res.destination.lng));
// 应用视野调整
map.fitBounds(bounds);