如何基于外部JSON文件向Google Map动态添加自定义标记

没问题，我来帮你搞定这个需求！核心就是把第二个$.getJSON和地图初始化、已有的天气数据结合起来，下面是具体的步骤和代码示例：

1. 先确保地图初始化完成 #

首先你得有一个Google Map的实例，把它存在全局变量里，方便后续添加标记时调用：

// 全局变量存储地图实例
let map;

// 初始化地图的函数（记得在Google Map脚本加载后调用这个函数）
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 39.8283, lng: -98.5795 }, // 可替换成你需要的默认中心点
    zoom: 4
  });

  // 这里开始处理数据加载和标记添加
  loadDataAndAddMarkers();
}

2. 并行加载天气和坐标数据（更高效） #

比起嵌套调用，用Promise.all并行加载两个JSON文件会更高效，不用等一个加载完再加载另一个：

function loadDataAndAddMarkers() {
  // 并行请求两个JSON文件
  Promise.all([
    $.getJSON('your-weather-data.json'), // 你原来的天气数据接口
    $.getJSON('your-locations-coords.json') // 新的地理坐标JSON文件
  ])
  .then(function([weatherData, locationsData]) {
    // 两个数据都加载成功后，遍历每个位置
    locationsData.forEach(location => {
      // 关键：通过共同标识（比如locationId/名称）匹配对应位置的天气数据
      const matchedWeather = weatherData.find(weather => weather.locationId === location.id);

      if (matchedWeather) {
        // 根据天气条件选择自定义图标
        const weatherIcon = getWeatherIcon(matchedWeather.condition);

        // 创建并添加标记到地图
        const marker = new google.maps.Marker({
          position: { lat: location.latitude, lng: location.longitude },
          map: map,
          title: location.name, // 鼠标悬停显示的名称
          icon: weatherIcon // 自定义天气图标
        });

        // 可选：给标记添加点击弹窗，显示详细天气
        addInfoWindowToMarker(marker, location.name, matchedWeather);
      }
    });
  })
  .catch(function(error) {
    console.error('数据加载失败:', error);
  });
}

// 封装一个根据天气条件返回图标的函数
function getWeatherIcon(condition) {
  // 这里替换成你实际的图标URL
  switch(condition.toLowerCase()) {
    case 'sunny':
      return '/icons/sunny.png';
    case 'rainy':
      return '/icons/rainy.png';
    case 'cloudy':
      return '/icons/cloudy.png';
    case 'snowy':
      return '/icons/snowy.png';
    default:
      return '/icons/default.png'; // 默认图标
  }
}

// 封装添加信息窗口的函数
function addInfoWindowToMarker(marker, locationName, weather) {
  const infoWindow = new google.maps.InfoWindow({
    content: `
      <h4>${locationName}</h4>
      <p>天气：${weather.condition}</p>
      <p>温度：${weather.temperature}°C</p>
    `
  });

  marker.addListener('click', () => {
    infoWindow.open(map, marker);
  });
}

3. 关键注意事项 #

• 数据匹配：确保你的天气JSON和坐标JSON有共同的标识字段（比如locationId、cityName），这样才能把每个位置的坐标和对应的天气正确关联起来。
• 图标尺寸：Google Map的标记图标建议用32x32px左右的图片，避免太大或太小影响显示效果。
• 错误处理：一定要加上catch或者fail来处理加载失败的情况，避免因为某个JSON加载出错导致整个功能崩溃。
• 性能优化：如果你的位置数量很多（比如几百个以上），可以考虑用MarkerClusterer插件来聚类标记，提升地图加载和交互的流畅度。

这样就能实现根据外部坐标JSON动态添加标记，并且每个标记显示对应天气的自定义图标啦！

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