在Astro项目中嵌入Google Map时遇到ERR_BLOCKED_BY_CLIENT和InvalidValueError错误的解决求助

看起来你遇到了两个典型的问题，我来分别帮你分析和解决：

1. 关于 ERR_BLOCKED_BY_CLIENT 错误 #

这个错误几乎都是浏览器的广告拦截扩展（比如AdBlock Plus、uBlock Origin）或者隐私类扩展导致的。Google Maps的gen_204请求是用来做CSP（内容安全策略）测试的，这类请求很容易被拦截器误判为广告或跟踪请求，从而被阻止。

解决方法：

• 暂时禁用你的广告拦截/隐私扩展，刷新页面看看是否恢复正常；
• 如果不想禁用扩展，可以把Google Maps的相关域名（maps.googleapis.com、maps.gstatic.com等）添加到扩展的白名单中；
• 也可以检查浏览器的内置隐私设置，比如Chrome的“隐私沙箱”是否开启，部分严格的隐私设置也可能拦截这类请求。

2. 关于 InvalidValueError: initMap is not a function 错误 #

这个问题的核心是Astro的脚本作用域隔离机制。Astro默认会把组件内的脚本进行作用域封装，不会暴露到全局window对象上，但Google Maps的callback参数是在全局作用域中查找initMap函数的，所以找不到就会报错。

这里有几种简单的解决方式，选一种就行：

方式一：把initMap挂载到全局window对象 #

修改你的脚本，直接把函数挂到window上：

<script>
  window.initMap = function() {
    // 原有的initMap代码不变
    var center = { lat: 37.7749, lng: -122.4194 };
    var map = new google.maps.Map(document.getElementById("map"), {
      center: center,
      zoom: 13,
    });
    var marker = new google.maps.Marker({
      position: center,
      map: map,
    });
  }
</script>

方式二：给脚本添加is:global指令 #

Astro的is:global指令会让脚本在全局作用域执行，不会被隔离：

<script is:global>
  function initMap() {
    // 原代码不变
    var center = { lat: 37.7749, lng: -122.4194 };
    var map = new google.maps.Map(document.getElementById("map"), {
      center: center,
      zoom: 13,
    });
    var marker = new google.maps.Marker({
      position: center,
      map: map,
    });
  }
</script>

方式三：结合client:load指令确保客户端加载 #

如果你的脚本需要在客户端立即执行，也可以加上client:load指令，同时结合全局挂载：

<script client:load>
  window.initMap = function() {
    // 原代码不变
    var center = { lat: 37.7749, lng: -122.4194 };
    var map = new google.maps.Map(document.getElementById("map"), {
      center: center,
      zoom: 13,
    });
    var marker = new google.maps.Marker({
      position: center,
      map: map,
    });
  }
</script>

额外注意点 #

• 确保你的Google Maps API密钥是有效的，并且已经在Google Cloud控制台中启用了「Maps JavaScript API」服务；
• 确认#map容器的高度设置生效了，有时候父元素的样式可能会影响容器高度，导致地图显示不出来，可以尝试给#map加上width: 100%;确保宽度也正常。

按照上面的方法调整后，应该就能正常加载Google地图了！

备注：内容来源于stack exchange，提问作者sooon