Google Maps图例加载异常：先显示于地图下方再跳至目标位置

开发者阿泽

2026-8-8

Google Maps 图例加载位置异常问题

地图构建正常，但图例加载时会先显示在地图下方，之后才跳转到目标位置，需要让图例在地图加载时直接处于指定位置（左下角）。

相关代码

HTML 代码

<div class="panel panel-primary">            
    <div id="map-section" class="panel-body">
        <div id="locationsMap"></div>
        <div id="legend"><h3 class="fw-semibold text-primary-dark text-center">Legend</h3></div>
    </div>            
</div>

CSS 代码

#locationsMap {
    width: 100%;
    height: 500px;    
}

#legend {
    font-family: Arial, sans-serif;
    background: #fff;
    padding: 10px;
    margin: 10px;
    border: 3px solid #000;
    display:none;
}

#legend h3 {
    margin-top: 0;
}

#legend img {
    vertical-align: middle;
}

主 JavaScript 代码（简化版）

'use strict'
let map;

function locationsMap() {
    // 初始化默认地图，以美国为中心
    map = getDefaultMap();
    // 初始化信息窗口
    const infoWindow = initializeInfoWindow();
    // 车辆位置数据数组
    const vehicleLocations = [
        {
            position: new google.maps.LatLng(29.63260, -95.59397),
            title: "Car #1 Houston, TX",
            info: ['Rosso Corsa', 'Beige', 'Castoro', 12103]
        },
        {
            position: new google.maps.LatLng(28.53833, -81.37923),
            title: "Car #2 Orlando, FL",
            info: ['Rosso Corsa', 'Beige', 'Castoro', 22500]
        },
        {
            position: new google.maps.LatLng(29.612833, -95.582365),
            title: "Car #3 Houston, TX",
            info: ['Rosso Corsa', 'Beige', 'Castoro', 67960]
        },
        {
            position: new google.maps.LatLng(26.714439, -80.054987),
            title: "Car #4 West Palm Beach, FL",
            info: ['Rosso Corsa', 'Beige', 'Castoro', 20913]
        },
        {
            position: new google.maps.LatLng(39.099728, -94.578568),
            title: "Car #5 Kansas City, MO",
            info: ['Rosso Corsa', 'Beige', 'Castoro', 4319]
        }
    ];
    // 创建所有标记和信息窗口内容
    for (let i = 0; i < vehicleLocations.length; i++) {
        const marker = new google.maps.Marker({
            position: vehicleLocations[i].position,
            title: vehicleLocations[i].title,
            animation: google.maps.Animation.DROP,
            icon: getMarkerImageUrl(vehicleLocations[i].info[0], vehicleLocations[i].info[1]),
            infoWindow: { content: buildInfoWindowContent(vehicleLocations[i].info, vehicleLocations[i].title) },
            map: map
        });
        // 为每个标记添加点击监听器，设置信息窗口
        marker.addListener("click", () => {
            infoWindow.close();
            infoWindow.setContent(marker.infoWindow.content);
            infoWindow.open(marker.getMap(), marker);
        });
    }
    // 构建地图图例
    buildLegend(coloredPins, map);
}

// 辅助函数
function getDefaultMap() {
    return new google.maps.Map(document.getElementById("locationsMap"), {
        zoom: 4,
        center: {lat: 41.23456, lng: -97.87654 },
    });
}
function initializeInfoWindow() {
    return new google.maps.InfoWindow({
        content: "",
        disableAutoPan: true
    });
}

图例构建函数

function buildLegend(pins, map) {
    const urlBase = "https://myblobstorage.blob.core.windows.net/ferrari-512m/images/google-map-icons/kraked/";
    const legend = document.getElementById("legend");
    const div = document.createElement("div");

    const innerHTML = `<img src="${urlBase}${pins.rossoBeige.icon}"> ${pins.rossoBeige.name}<br/>`
        + `<img src="${urlBase}${pins.rossoNero.icon}"> ${pins.rossoNero.name}<br/>`
        + `<img src="${urlBase}${pins.neroBeige.icon}"> ${pins.neroBeige.name}<br/>`
        + `<img src="${urlBase}${pins.neroNero.icon}"> ${pins.neroNero.name}<br/>`
        + `<img src="${urlBase}${pins.neroGrigio.icon}"> ${pins.neroGrigio.name}<br/>`
        + `<img src="${urlBase}${pins.gialloBlu.icon}"> ${pins.gialloBlu.name}<br/>`
        + `<img src="${urlBase}${pins.gialloNero.icon}"> ${pins.gialloNero.name}<br/>`
        + `<img src="${urlBase}${pins.canneBeige.icon}"> ${pins.canneBeige.name}<br/>`
        + `<img src="${urlBase}${pins.canneNero.icon}"> ${pins.canneNero.name}<br/>`
        + `<img src="${urlBase}${pins.maranelloNero.icon}"> ${pins.maranelloNero.name}<br/>`
        + `<img src="${urlBase}${pins.metallizatoBeige.icon}"> ${pins.metallizatoBeige.name}<br/>`;

    div.innerHTML = innerHTML;
    legend.appendChild(div);
    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(legend);
}

解决方案

问题根源是图例初始属于页面DOM流中的元素（位于地图下方），之后才被添加到Google Maps的控件容器，导致视觉上的位置跳转。以下两种方法可解决：

方法一：直接在JS中创建图例元素

移除HTML中的#legend元素：

<div class="panel panel-primary">            
    <div id="map-section" class="panel-body">
        <div id="locationsMap"></div>
    </div>            
</div>

修改buildLegend函数，直接创建图例元素并添加到地图控件：

function buildLegend(pins, map) {
    const urlBase = "https://myblobstorage.blob.core.windows.net/ferrari-512m/images/google-map-icons/kraked/";
    // 创建legend元素
    const legend = document.createElement("div");
    legend.id = "legend";
    // 添加标题
    const title = document.createElement("h3");
    title.className = "fw-semibold text-primary-dark text-center";
    title.textContent = "Legend";
    legend.appendChild(title);

    const div = document.createElement("div");
    const innerHTML = `<img src="${urlBase}${pins.rossoBeige.icon}"> ${pins.rossoBeige.name}<br/>`
        + `<img src="${urlBase}${pins.rossoNero.icon}"> ${pins.rossoNero.name}<br/>`
        + `<img src="${urlBase}${pins.neroBeige.icon}"> ${pins.neroBeige.name}<br/>`
        + `<img src="${urlBase}${pins.neroNero.icon}"> ${pins.neroNero.name}<br/>`
        + `<img src="${urlBase}${pins.neroGrigio.icon}"> ${pins.neroGrigio.name}<br/>`
        + `<img src="${urlBase}${pins.gialloBlu.icon}"> ${pins.gialloBlu.name}<br/>`
        + `<img src="${urlBase}${pins.gialloNero.icon}"> ${pins.gialloNero.name}<br/>`
        + `<img src="${urlBase}${pins.canneBeige.icon}"> ${pins.canneBeige.name}<br/>`
        + `<img src="${urlBase}${pins.canneNero.icon}"> ${pins.canneNero.name}<br/>`
        + `<img src="${urlBase}${pins.maranelloNero.icon}"> ${pins.maranelloNero.name}<br/>`
        + `<img src="${urlBase}${pins.metallizatoBeige.icon}"> ${pins.metallizatoBeige.name}<br/>`;

    div.innerHTML = innerHTML;
    legend.appendChild(div);
    legend.style.display = "block";
    // 添加到地图控件
    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(legend);
}

方法二：提前移除原有图例元素

保留原有HTML，在buildLegend开头先将图例从原父容器移除：

function buildLegend(pins, map) {
    const urlBase = "https://myblobstorage.blob.core.windows.net/ferrari-512m/images/google-map-icons/kraked/";
    const legend = document.getElementById("legend");
    // 先从原父容器移除
    legend.parentNode.removeChild(legend);
    
    const div = document.createElement("div");
    const innerHTML = `<img src="${urlBase}${pins.rossoBeige.icon}"> ${pins.rossoBeige.name}<br/>`
        + `<img src="${urlBase}${pins.rossoNero.icon}"> ${pins.rossoNero.name}<br/>`
        + `<img src="${urlBase}${pins.neroBeige.icon}"> ${pins.neroBeige.name}<br/>`
        + `<img src="${urlBase}${pins.neroNero.icon}"> ${pins.neroNero.name}<br/>`
        + `<img src="${urlBase}${pins.neroGrigio.icon}"> ${pins.neroGrigio.name}<br/>`
        + `<img src="${urlBase}${pins.gialloBlu.icon}"> ${pins.gialloBlu.name}<br/>`
        + `<img src="${urlBase}${pins.gialloNero.icon}"> ${pins.gialloNero.name}<br/>`
        + `<img src="${urlBase}${pins.canneBeige.icon}"> ${pins.canneBeige.name}<br/>`
        + `<img src="${urlBase}${pins.canneNero.icon}"> ${pins.canneNero.name}<br/>`
        + `<img src="${urlBase}${pins.maranelloNero.icon}"> ${pins.maranelloNero.name}<br/>`
        + `<img src="${urlBase}${pins.metallizatoBeige.icon}"> ${pins.metallizatoBeige.name}<br/>`;

    div.innerHTML = innerHTML;
    legend.appendChild(div);
    legend.style.display = "block";
    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(legend);
}

两种方法都能让图例直接加载到地图指定位置，避免视觉跳转。

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

Google Maps图例加载异常：先显示于地图下方再跳至目标位置

相关代码 #

HTML 代码 #

CSS 代码 #

主 JavaScript 代码（简化版） #

图例构建函数 #

解决方案 #

方法一：直接在JS中创建图例元素 #

方法二：提前移除原有图例元素 #