如何在WordPress动态地图中自定义Google Maps AdvancedMarkerView？

问题描述 #

我正在使用ACF在WordPress/WooCommerce中通过自定义产品字段创建动态地图，现有initMarker函数用于根据DOM元素的data-lat/data-lng创建地图标记：

/**
 * initMarker
 *
 * Creates a marker for the given jQuery element and map.
 *
 * @date    22/10/19
 * @since   5.8.6
 *
 * @param   jQuery $el The jQuery element.
 * @param   object The map instance.
 * @return  object The marker instance.
 */
function initMarker( $marker, map ) {

    // Get position from marker.
    var lat = $marker.data('lat');
    var lng = $marker.data('lng');
    var latLng = {
        lat: parseFloat( lat ),
        lng: parseFloat( lng )
    };

    // Create marker instance.
    var marker = new google.maps.Marker({
        position: latLng,
        map: map
    });

    // Append to reference for later use.
    map.markers.push( marker );
    
    // If marker contains HTML, add it to an infoWindow.
    if( $marker.html() ){

        // Create info window.
        var infowindow = new google.maps.InfoWindow({
            content: $marker.html()
        });

        // Show info window when marker is clicked.
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open( map, marker );
        });
    }
}

我希望为这些动态标记设置自定义颜色，Google Maps文档展示了固定位置下使用AdvancedMarkerView的样式方法，但删除示例中的固定位置行后地图会消失，请问能否在我的动态地图中应用这些样式？

解决方案 #

完全可以在动态地图中应用AdvancedMarkerView的自定义样式，核心是保留动态获取的位置参数，同时替换原有的google.maps.Marker创建逻辑。以下是完整实现步骤：

1. 确保加载Advanced Markers库 #

首先，在加载Google Maps API的URL中添加marker库参数，否则无法使用PinView和AdvancedMarkerView：

<!-- 替换成你的API密钥 -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker"></script>

2. 修改initMarker函数 #

替换原有的标记创建逻辑，使用PinView定义样式，再通过AdvancedMarkerView绑定动态位置：

function initMarker( $marker, map ) {
    // 保留原有动态位置获取逻辑
    var lat = $marker.data('lat');
    var lng = $marker.data('lng');
    var latLng = {
        lat: parseFloat( lat ),
        lng: parseFloat( lng )
    };

    // 创建自定义样式的PinView
    var pinView = new google.maps.marker.PinView({
        background: "#FBBC04", // 自定义背景色
        borderColor: "#137333", // 自定义边框色
        // 可选：添加标记内部文字（比如产品ID）
        // glyph: $marker.data('product-id'),
        // glyphColor: "#ffffff"
    });

    // 创建AdvancedMarkerView实例，绑定动态位置与样式
    var marker = new google.maps.marker.AdvancedMarkerView({
        position: latLng, // 必须保留该参数，否则标记无法显示
        map: map,
        content: pinView.element
    });

    // 保留原有标记引用逻辑，方便后续管理
    map.markers.push( marker );
    
    // 调整InfoWindow绑定逻辑（适配AdvancedMarkerView）
    if( $marker.html() ){
        var infowindow = new google.maps.InfoWindow({
            content: $marker.html()
        });

        // 为AdvancedMarkerView绑定点击事件
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open({
                map: map,
                anchor: marker
            });
        });
    }

    return marker;
}

关键注意事项 #

• 不能省略position参数：AdvancedMarkerView必须指定位置才能在地图上渲染，这也是你删除示例中固定位置后地图异常的原因——标记无位置导致地图渲染失败。
• API库依赖：必须加载marker库，否则PinView和AdvancedMarkerView会抛出未定义错误。
• InfoWindow适配：AdvancedMarkerView作为锚点时，infowindow.open()需要传入anchor参数，而非直接传递标记实例。

内容的提问来源于stack exchange，提问作者Kauê Friedrich