如何为Google Maps标记添加标记标签？附示例HTML代码

没问题，我来帮你搞定这个需求——给Google Maps的标记加上标签其实很简单，咱们可以直接用Google Maps JavaScript API里的MarkerLabel对象来实现。下面我会基于你提供的代码片段，补全并修改成可直接运行的版本，顺便给你拆解关键步骤：

完整可运行代码示例 #

<!DOCTYPE html>
<html>
<head>
    <title>Geolocation with Marker Labels</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        /* Always set the map height explicitly to define the size of the div element that contains the map. */
        #map {
            height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        function initMap() {
            // 设置地图中心（这里以纽约为例，你可以替换成自己需要的坐标）
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 12,
                center: { lat: 40.7128, lng: -74.0060 },
            });

            // 创建带标签的标记
            const marker = new google.maps.Marker({
                position: { lat: 40.7128, lng: -74.0060 },
                map: map,
                title: "纽约市", // 鼠标悬停时的提示文本
                // 核心：标记标签的配置项
                label: {
                    text: "NYC", // 标签显示的文本（必填）
                    color: "white", // 文本颜色
                    fontSize: "14px", // 字体大小
                    fontWeight: "bold", // 字体粗细
                    backgroundColor: "#ff4444", // 标签背景色（可选）
                    padding: "2px 6px", // 内边距，让标签更美观（可选）
                    borderRadius: "3px" // 圆角优化样式（可选）
                }
            });
        }
    </script>
    <!-- 替换成你自己的Google Maps API密钥才能正常加载地图 -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>

关键部分说明 #

• 引入API脚本：一定要替换YOUR_API_KEY为你自己的Google Maps API密钥，并且确保在Google Cloud平台已经启用了Maps JavaScript API，不然地图无法加载。
• MarkerLabel配置：在创建Marker对象时，通过label属性配置标签：
  • text：必填项，标签显示的核心文本，建议用简短的缩写或关键词，避免过长影响显示。
  • 样式参数：color、fontSize、fontWeight这些基础样式可以快速调整标签外观；backgroundColor、padding、borderRadius属于进阶美化选项，按需添加即可。
• 多标记批量添加：如果需要给多个标记加不同标签，只需要在每个Marker的配置里单独设置label属性就行，逻辑是完全一致的。

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