调整缩放以匹配标记时出现缩放图标问题

Question

我在调整地图上标记的大小时遇到问题。我正在向地图添加多个标记并使用“bounds.extend(marker0.position); 和 Map.fitBounds (bounds);”设置初始缩放比例。下面的代码可以在地图缩放时重新缩放标记。但是，如果“bounds.extend(marker0.position);”未注释，标记不会调整大小。

感谢建议。

function initMap() {
           const GoogleMap = new google.maps.Map(document.getElementById('MapInsert'),
               {
                   zoom: 15, scrollwheel: false, zoomControl: true,
                   styles: [{ 'featureType': 'poi', 'stylers': [{ 'visibility': 'off' }] }],
                   center: { lat: 51.187831, lng: -2.545948 }
               });
           const marker0 = new google.maps.Marker({
               Map: GoogleMap, position: { lat: 51.187096, lng: -2.544606 },
               title: 'Test1',
               optimized: false,
               icon: '/clubs/flooding/icons/culverticon.png'
           });
//           bounds.extend(marker0.position);

           google.maps.event.addListener(GoogleMap, 'zoom_changed', function () {
               const zoomSizes = [8, 15, 25, 40, 50, 60, 70, 80, 90, 100];
               var zoom = this.getZoom();
               if (zoom > 21) zoom = 21;
               if (zoom < 12) zoom = 12;
               var relativePixelSize = zoomSizes[zoom - 12];
               marker0.setIcon({
                   url: '/clubs/flooding/icons/culverticon.png', scaledSize: new                    google.maps.Size(relativePixelSize, relativePixelSize)
               });
               marker0.setTitle('Zoom: ' + zoom + ' IconSize: ' + relativePixelSize)
           })
       }; 

此代码将根据地图的缩放级别调整标记的大小。但是，如果命令“bounds.extend(marker0.position);”未注释，标记不会调整大小。

Answer 1

经过更多调查，我已经解决了这个问题。问题是由时间造成的。用

 bounds.extend(marker0.position);

声明。这会延迟地图的处理，因此在调用

google.maps.event.addListener(GoogleMap, 'zoom_changed', function () {

之前它尚未完全加载。因此，当调整地图大小时，不会调用该事件。

删除

 bounds.extend(marker0.position);

语句会消除延迟，以便地图在事件调用之前已加载。

通过异步加载地图，等待地图库导入后再创建地图，问题已经解决：

async function initMap() {
const { Map } = await google.maps.importLibrary('maps');
const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');
const GoogleMap = new google.maps.Map(document.getElementById('MapInsert'), {
    zoom: 15, scrollwheel: false,
    zoomControl: true,
    styles: [{ 'featureType': 'poi', 'stylers': [{ 'visibility': 'off' }] }],
    center: { lat: 51.187831, lng: -2.545948 },
});