Google Maps带动态标记出现圆形瓦片异常问题求助

我看了你的代码，大概率是地图容器的CSS规则没有生效导致的瓦片加载异常，另外还有几个细节可以优化来避免这类问题，具体分析和解决方案如下：

1. 最核心的问题：CSS选择器错误 #

你的CSS代码里myMap2这个选择器缺少了标识符前缀——从JS里document.getElementById("myMap2")的调用来看，这个是地图容器的ID，必须写成#myMap2，不然浏览器根本不会应用这个样式规则。容器没有正确的宽高设置，Google Maps就无法正确计算瓦片的布局，进而出现你看到的圆形瓦片问题。

修复后的CSS代码：

#myMap2 {
  width: 1041px;
  height: 370px;
  position: relative;
  overflow: hidden;
}

2. 地图初始化时机的问题 #

如果你的Initialize()函数在DOM还没加载完成时就被调用，地图容器可能还没有渲染出来，同样会导致尺寸计算错误。建议把初始化逻辑放在DOM加载完成后执行。

3. 优化后的完整脚本 #

我还帮你补充了异常处理逻辑，避免数据为空或无效时地图崩溃：

// 确保DOM完全加载后再初始化地图
$(document).ready(function() {
  Initialize();
});

function Initialize() {
  google.maps.visualRefresh = true;
  var infowindow;
  
  $.ajax({
    type: "GET",
    url: "/api/Truck",
    dataType: 'json',
    contentType: 'application/x-www-form-urlencoded',
    success: function (data) {
      // 处理无数据的情况
      if (!data || data.length === 0) {
        console.error("未获取到卡车位置数据");
        return;
      }
      
      var Center = new google.maps.LatLng(data[0].CurrentLatitude, data[0].CurrentLongitude);
      var mapOptions = {
        zoom: 8,
        center: Center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      
      var gmap = new google.maps.Map(document.getElementById("myMap2"), mapOptions);
      
      $.each(data, function (i, item) {
        // 跳过经纬度无效的数据
        if (!item.CurrentLatitude || !item.CurrentLongitude) {
          console.warn(`第${i+1}条数据的经纬度无效，已跳过`, item);
          return;
        }
        
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(item.CurrentLatitude, item.CurrentLongitude),
          map: gmap,
          title: item.TruckNumber,
          icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
        });
        
        google.maps.event.addListener(marker, 'click', function () {
          if (infowindow) infowindow.close();
          infowindow = new google.maps.InfoWindow({
            content: "<div class='infoDiv'><h3>" + item.TruckNumber + "</h3></div>"
          });
          infowindow.open(gmap, marker);
        });
      });
    },
    // 处理AJAX请求失败的情况
    error: function(xhr, status, error) {
      console.error("获取卡车数据失败：", error);
    }
  });
}

4. 额外检查点 #

如果修复后还是出现瓦片异常，你需要确认：

• 已正确引入Google Maps JS API，并且使用了有效的API密钥（现在Google Maps强制要求密钥，无密钥可能会导致瓦片加载受限）
• 地图容器没有被其他CSS规则意外覆盖宽高或定位属性

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