Angular 6中使用Google Maps API v3点击地图无法显示Marker问题

你的Marker无法显示的核心问题是JavaScript的this上下文绑定错误，还有一处语法错误，具体分析和修复如下：

1. 上下文绑定错误 #

在initMap方法中，你使用普通function作为addListener的回调函数：

google.maps.event.addListener(this.map, 'click', function(event) {
  this.placeNewMarker(event.latLng);
});

这里的this指向的是google.maps.Map实例，而不是你的Angular组件实例。当调用this.placeNewMarker时，方法内部的this.map并不是你初始化的组件级map对象，导致创建的Marker无法关联到正确的地图上。

修复方案：改用箭头函数，箭头函数会继承外层上下文的this（即组件实例）：

google.maps.event.addListener(this.map, 'click', (event) => {
  this.placeNewMarker(event.latLng);
});

2. 语法错误 #

你的placeNewMarker方法末尾多了一个多余的});，这会导致代码执行报错，直接阻止Marker的创建：

// 错误的代码
placeNewMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: this.map
  });
}); // 这里多余了

修复方案：去掉多余的闭合符号，修正后的方法：

placeNewMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: this.map
  });
}

额外检查点 #

如果修复后还是看不到Marker，可以排查以下几点：

• 确认Google Maps JavaScript API已正确加载，浏览器控制台没有加载失败的报错
• 检查地图容器#map是否设置了明确的宽高样式（比如width: 100%; height: 400px;），避免地图容器不可见导致Marker也无法显示
• 若使用自定义Marker图标，确保图标路径正确且可访问（默认图标无需额外设置，会显示Google Maps的默认红点）

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