如何使用JavaScript将多个Google Maps标记点连接到单个位置

嗨，我看你现在想要实现的是让所有标记点都辐射连接到指定的中心点，而不是按顺序连成一条线对吧？咱们来调整代码解决这个问题～

原代码的问题分析 #

你当前的代码里，每次循环都会把当前标记点的位置添加到flightPlanCoordinates数组中，然后基于这个不断变长的数组创建折线，所以折线会变成「第一个点→第二个点→第三个点→第四个点」的顺序连接，这就是你看到的当前效果：

而你想要的是每个标记点都直接连接到指定的中心点（['134.56.32.13',19.0760,72.8777]），也就是辐射状的连接，类似这样：

修改后的代码实现 #

核心思路是：为每个标记点单独创建一条折线，折线的路径是「中心点坐标 → 当前标记点坐标」，而不是把所有点串在同一个路径里。下面是调整后的完整代码：

// 定义指定的中心点
const centerLocation = ['134.56.32.13', 19.0760, 72.8777];
const locations = [ 
  ['123.134.67.145', 22.5726, 88.3639], 
  ['140.91.57.132', 28.7041, 77.1025], 
  ['110.191.167.130', 13.0827, 80.2707], 
  ['192.168.151.151', 12.9716, 77.5946] 
]; 

const map = new google.maps.Map(document.getElementById('map'), { 
  zoom: 4, 
  center: new google.maps.LatLng(centerLocation[1], centerLocation[2]), // 地图中心设为目标中心点
  mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

const infowindow = new google.maps.InfoWindow(); 

// 可选：给中心点添加标记
const centerMarker = new google.maps.Marker({
  position: new google.maps.LatLng(centerLocation[1], centerLocation[2]),
  map: map,
  title: centerLocation[0] // 显示IP地址为标题
});

// 遍历所有标记点
let marker, i;
for (i = 0; i < locations.length; i++) { 
  marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map 
  }); 

  // 为当前标记点创建到中心点的折线
  const flightPath = new google.maps.Polyline({ 
    map: map, 
    path: [
      new google.maps.LatLng(centerLocation[1], centerLocation[2]), // 中心点坐标
      marker.getPosition() // 当前标记点坐标
    ], 
    strokeColor: "#ff0000", 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
  }); 

  // 标记点点击事件
  google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
    } 
  })(marker, i)); 
}

关键修改点说明 #

1. 单独定义中心点：把你指定的目标位置抽成centerLocation变量，方便后续复用，同时把地图的center直接设为这个中心点，让地图加载时就聚焦到目标位置。
2. 为每个点单独创建折线：在循环里，每次创建折线时，路径只包含「中心点」和「当前标记点」两个坐标，这样每条折线都是独立的辐射线。
3. 可选的中心点标记：如果需要显示中心点的标记，添加centerMarker代码块即可，方便识别目标位置。

这样修改后，就能实现你想要的所有标记点连接到单个中心点的效果啦～

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