Question

未捕获的类型错误：无法读取未定义的属性（读取“地图”）

2022-04-19

8061

javascript google-maps

我试图在文件 html.twig 上显示来自谷歌地图的地图，但是它显示了这个错误

Uncaught TypeError: Cannot read properties of undefined (reading 'maps')

我的 twig :

let map, google;
let markers = [];
var infowindow = new google.maps.InfoWindow();

function initMap() {
  const haightAshbury = {
    lat: 36.77355514795189,
    lng: 9.088027850665279
  };
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: haightAshbury,
    draggable: true

  });
  map.addListener("click", (event) => {
    addMarker(event.latLng);
  });
}

function addMarker(location) {
  deleteMarkers();
  const marker = new google.maps.Marker({
    position: location,
    map: map,
  });

<script src="https://maps.googleapis.com/maps/api/js?key={APIKeyHere}&callback=initMap&libraries=&v=weekly" async>
</script>

<script src="https://polyfill.io/v3/polyfill.min.js?features=default">
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>

我该如何解决它，谢谢

Answer 1

您定义了一个名为 google 的变量，但从未为其分配值：

let map,google;

这使其变为 undefined 。然后，您尝试从该 undefined 变量中读取一个值：

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

由于您要导入的库已有一个名为 google 的变量，并且您可能不想隐藏该变量，请将其从变量定义中删除：

let map;

Answer 2

您不应将 google 声明为变量
您正在使用回调函数 ( initMap ) 加载 API。这意味着一旦 API 完成加载，就会调用 initMap 函数，但您在回调函数之外使用了 new google.maps.InfoWindow(); ，因此出现错误

您应该将该行移至回调函数内，或将其删除，因为您似乎没有使用 Infowindows（至少在您提供的代码中没有使用）。