如何在Angular 4中通过JSON在Google Maps展示多经纬度点位

嘿，我来帮你搞定这个问题！你已经成功加载地图了，这已经迈出了一大步～要展示多个点位，只需要对你的JSON数据做个小调整，再加上循环遍历的逻辑就行，具体步骤如下：

1. 修正你的JSON数据结构 #

你现在的JSON是三个独立的对象，没法直接遍历，得把它们放到一个数组里，这样我们才能用循环逐个处理每个点位：

const locations = [
  { "post_country": "Vietnam", "post_latitude": 10.4452129, "post_longitude": 106.4729811 },
  { "post_country": "Kyrgyzstan", "post_latitude": 41.1694718, "post_longitude": 75.8098141 },
  { "post_country": "China", "post_latitude": 34.2456501, "post_longitude": 108.9877602 }
];

2. 循环遍历创建标记 #

接下来，在你的地图初始化函数里，用forEach循环遍历每个点位，为每个点位创建Google Maps标记。这里我会给出完整的示例代码，包括可选的信息窗口（点击标记显示详情）：

function initMap() {
  // 初始化地图，先随便设一个中心，后面可以优化成自动适配所有点位
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: { lat: 25, lng: 80 } // 临时中心坐标，后面可以替换
  });

  // 遍历每个点位，创建标记
  locations.forEach(location => {
    // 创建标记实例
    const marker = new google.maps.Marker({
      position: { lat: location.post_latitude, lng: location.post_longitude },
      map: map,
      title: location.post_country // 鼠标悬停时显示国家名称
    });

    // 可选：给标记添加点击显示的信息窗口
    const infoWindow = new google.maps.InfoWindow({
      content: `<h3>${location.post_country}</h3><p>坐标: ${location.post_latitude}, ${location.post_longitude}</p>`
    });

    // 绑定点击事件，打开信息窗口
    marker.addListener("click", () => {
      infoWindow.open(map, marker);
    });
  });
}

3. 优化：让地图自动适配所有点位范围 #

如果想让地图自动缩放并移动到能显示所有点位的最佳位置，可以用LatLngBounds来计算所有点位的边界：

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
  });

  // 创建边界对象，用来收集所有点位的范围
  const bounds = new google.maps.LatLngBounds();

  locations.forEach(location => {
    const position = { lat: location.post_latitude, lng: location.post_longitude };
    const marker = new google.maps.Marker({
      position: position,
      map: map,
      title: location.post_country
    });

    // 将当前点位加入边界范围
    bounds.extend(position);

    // 信息窗口代码同上...
  });

  // 让地图自动适配边界，显示所有点位
  map.fitBounds(bounds);
}

最后别忘了引入Google Maps API #

确保你的HTML里已经正确引入了Google Maps的API脚本（替换成你的API密钥）：

<!-- 地图容器，设置好宽高 -->
<div id="map" style="height: 400px; width: 100%;"></div>

<!-- 引入Google Maps API，替换YOUR_API_KEY为你的密钥 -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

这样就能在地图上同时展示所有点位啦，每个标记都能点击查看详情，地图也会自动调整到合适的范围～

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