基于Google Maps API的HTML自定义图片标记实现问题咨询

嘿，我帮你搞定这个自定义标记的问题！我看你已经在尝试用Google Maps API开发功能了，只是卡在替换默认标记为自定义图片这一步对吧？下面给你一个完整的可运行示例代码，还有关键部分的详细解释，你可以直接参考调整：

<!DOCTYPE html>
<html>
<head>
    <title>Advanced map</title>
    <!-- 引入Google Maps API，记得替换成你自己的API密钥 -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=你的API密钥"></script>
    <script type="text/javascript">
        function initMap() {
            // 设置地图中心坐标，比如这里用纽约的坐标示例
            const mapCenter = new google.maps.LatLng(40.7128, -74.0060);
            
            // 初始化地图实例
            const map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: mapCenter
            });
            
            // 创建自定义图标配置对象
            const customIcon = {
                url: '你的自定义图片路径.png', // 替换成你的图片地址（本地/在线都可以）
                scaledSize: new google.maps.Size(40, 40), // 调整图片在地图上的显示尺寸
                anchor: new google.maps.Point(20, 40) // 设置锚点，让图片底部中点对准目标坐标
            };
            
            // 在指定位置添加自定义标记
            const marker = new google.maps.Marker({
                position: mapCenter,
                map: map,
                icon: customIcon, // 这里传入自定义图标，替换默认样式
                title: '我的自定义标记'
            });
        }
    </script>
</head>
<body onload="initMap()">
    <!-- 地图容器，设置宽高才能正常显示 -->
    <div id="map" style="width: 100%; height: 500px;"></div>
</body>
</html>

关键部分拆解说明： #

• API密钥配置：现在Google Maps API必须使用个人API密钥才能正常加载，你需要去Google Cloud平台申请后替换代码里的你的API密钥，否则地图会加载失败。
• 自定义图标核心设置：
  • url：填写你的图片路径，本地图片用相对路径（比如./assets/marker-icon.png），在线图片直接填完整URL。
  • scaledSize：用来缩放图片，避免原图过大或过小影响显示效果，根据你的图片实际尺寸调整数值。
  • anchor：这个参数决定了图片的哪个点会精准对准你设置的坐标，比如示例里的(20,40)对应图片的水平中点、底部位置，这样标记不会偏移目标位置。
• 标记初始化：创建Marker对象时，通过icon参数传入我们定义好的customIcon，就能替换掉默认的红色标记了。

额外注意事项： #

• 如果你的自定义图片是不规则形状（比如圆形、异形图标），要调整anchor的值适配，比如圆形图标可以设置为(20,20)（中心点）。
• 确保图片路径正确，本地图片要放在项目的正确目录下，否则会出现图标加载不出来的情况。
• 初始化函数initMap()要在页面加载完成后触发，示例里用了<body onload="initMap()">，你也可以用DOMContentLoaded事件来触发，效果是一样的。

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