Google Maps API：自定义样式地图无法显示标记点求助

我正在尝试创建一个带自定义样式和标记点的地图，自定义样式的地图能正常工作，但标记点就是不显示。我试过了这里和reddit上的很多解决方案，但都不管用，谁能帮我看看哪里错了？

以下是我的代码：

function initMap() {
  // Styles a map in night mode.


  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.674, lng: -73.945 },
    zoom: 12,
    disableDefaultUI: true,

    styles: [
    {
        "featureType": "all",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#3b6c39"
            }
        ]
    },
    {
        "featureType": "all",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "saturation": 36
            },
            {
                "color": "#000000"
            },
            {
                "lightness": 40
            }
        ]
    },
    {
        "featureType": "all",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#000000"
            },
            {
                "lightness": 16
            }
        ]
    },
    {
        "featureType": "all",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 20
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 17
            },
            {
                "weight": 1.2
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 20
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 21
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 17
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 29
            },
            {
                "weight": 0.2
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 18
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 16
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 19
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#1a1a1a"
            },
            {
                "lightness": 17
            }
        ]
    }
]
});
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 40.73711331385601, lng: -73.99081789299093 },
  });
}

window.initMap = initMap;

我不是要让你帮我写完整的地图代码，只是想知道怎么解决标记点不显示的问题，给我指条明路就行。

问题诊断与解决建议 #

嘿，我帮你排查了下，核心问题其实很明显：

• 第一个致命错误：你在initMap函数里用了await来导入Marker库，但这个函数没有声明为async函数！await关键字只能在异步函数（带async前缀）里使用，这会直接导致代码抛出语法错误，标记点的创建逻辑根本没机会执行。

• 次要注意点：你的地图样式里有一段配置是隐藏所有默认标签图标：

  {
      "featureType": "all",
      "elementType": "labels.icon",
      "stylers": [{"visibility": "off"}]
  }
  

  不过你用的是新版的AdvancedMarkerElement，这个配置不会影响它的显示，但如果后续换成旧版Marker组件的话，这个样式会把标记点隐藏，到时候记得调整。

修正后的关键代码 #

只要把initMap改成异步函数，就能解决当前的核心问题：

async function initMap() { // 这里加上async声明
  // Styles a map in night mode.
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.674, lng: -73.945 },
    zoom: 12,
    disableDefaultUI: true,
    styles: [/* 你的样式数组保持不变 */]
  });

  // 现在await可以正常使用了
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 40.73711331385601, lng: -73.99081789299093 },
  });
}

window.initMap = initMap;

另外，建议你打开浏览器的开发者工具（F12），查看Console面板的报错信息，这是排查这类前端问题最直接的方式，下次遇到类似问题可以先看这里有没有红色的错误提示~

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