如何在现有Google地图中添加带街景小人及朝向的左下角小地图

嘿Ferdy，这个需求很好实现！借助Google Maps API的街景组件和迷你地图实例，我们可以在主地图左下角加一个同步显示Pegman位置和朝向的小地图，下面结合你的现有代码一步步来改：

第一步：添加迷你地图的HTML容器 #

首先在你的页面里，主地图容器map-canvas旁边，新增一个迷你地图的div，通过CSS固定它在主地图的左下角：

<div id="map-canvas" style="width:100%; height:100vh;"></div>
<!-- 迷你地图容器，样式可按需调整 -->
<div id="mini-map" style="position:absolute; bottom:20px; left:20px; width:200px; height:200px; border:2px solid #333; border-radius:4px;"></div>

你可以根据自己的UI需求修改这个div的width、height、bottom、left等样式，比如把边框改成更贴合你网站风格的样式。

第二步：修改JavaScript代码，初始化并联动迷你地图 #

在你的initialize函数里，主地图初始化完成后，添加以下代码来创建迷你地图，并让它和主地图、街景状态联动：

function initialize() {
    var latlng = new google.maps.LatLng(52.207206, 4.866782);
    var myOptions = {
        zoom: GetPrevZoom(),
        mapTypeId: "OSM",
        streetViewControl: true,
        gestureHandling: "greedy",
        zoomControl: false,
        mapTypeControlOptions: {
            mapTypeIds: [
                "OSM",
                google.maps.MapTypeId.SATELLITE,
                google.maps.MapTypeId.ROADMAP
            ]
        }
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    map.mapTypes.set("OSM", new google.maps.ImageMapType({
        getTileUrl: function (coord, zoom) {
            return "https://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
        },
        tileSize: new google.maps.Size(256, 256),
        name: "OpenStreetMap",
        maxZoom: 19
    }));

    // -------------------------- 新增：初始化迷你地图 --------------------------
    var miniMapOptions = {
        zoom: 16, // 迷你地图默认缩放，可按需调整（建议比主地图小1-2级）
        mapTypeId: "OSM",
        streetViewControl: true,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_CENTER // 把Pegman放在迷你地图底部中间
        },
        zoomControl: false,
        mapTypeControl: false,
        gestureHandling: "none", // 禁止迷你地图的手势操作，避免干扰主地图
        disableDoubleClickZoom: true
    };
    var miniMap = new google.maps.Map(document.getElementById("mini-map"), miniMapOptions);
    // 直接复用主地图的OSM图层，无需重复定义
    miniMap.mapTypes.set("OSM", map.mapTypes.get("OSM"));

    // 关联主地图的街景实例
    var mainPanorama = map.getStreetView();

    // 监听街景可见性变化：进入/退出街景时同步迷你地图状态
    mainPanorama.addListener("visible_changed", function() {
        if (mainPanorama.getVisible()) {
            // 进入街景：获取Pegman位置，同步到迷你地图中心
            var pegmanPos = mainPanorama.getPosition();
            miniMap.setCenter(pegmanPos);
            
            // 在迷你地图上添加带朝向的标记（模拟Pegman的朝向）
            miniMap.pegmanMarker = new google.maps.Marker({
                position: pegmanPos,
                map: miniMap,
                icon: {
                    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                    scale: 4,
                    fillColor: "#000",
                    fillOpacity: 1,
                    rotation: mainPanorama.getPov().heading // 同步街景的朝向角度
                }
            });
        } else {
            // 退出街景：移除迷你地图上的朝向标记
            if (miniMap.pegmanMarker) {
                miniMap.pegmanMarker.setMap(null);
                delete miniMap.pegmanMarker;
            }
            // 同步主地图的中心到迷你地图
            miniMap.setCenter(map.getCenter());
        }
    });

    // 监听街景视角变化：实时更新迷你地图标记的朝向
    mainPanorama.addListener("pov_changed", function() {
        if (mainPanorama.getVisible() && miniMap.pegmanMarker) {
            miniMap.pegmanMarker.setIcon({
                path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                scale: 4,
                fillColor: "#000",
                fillOpacity: 1,
                rotation: mainPanorama.getPov().heading
            });
        }
    });

    // 监听主地图中心变化：非街景模式下同步迷你地图中心
    map.addListener("center_changed", function() {
        if (!mainPanorama.getVisible()) {
            miniMap.setCenter(map.getCenter());
        }
    });

    // 监听主地图地图类型变化：同步到迷你地图
    map.addListener("maptypeid_changed", function() {
        miniMap.setMapTypeId(map.getMapTypeId());
    });
    // -------------------------- 迷你地图相关代码结束 --------------------------

    map.addListener('zoom_changed', function () {
        sessionStorage.setItem('zoomlevel', map.getZoom());
    });

    oms = new OverlappingMarkerSpiderfier(map, { markersWontMove: true, markersWontHide: true, keepSpiderfied: true });
    var iw = new google.maps.InfoWindow();

    map.overlayMapTypes.push(null);
}

function GetPrevZoom() {
    let data = sessionStorage.getItem('zoomlevel');
    return data ? parseInt(data) : 18; // 优化：优先使用保存的缩放，无保存值时用18
}

一些可自定义的细节 #

1. 迷你地图样式：可以修改mini-map的CSS，比如调整大小、边框圆角、阴影，让它更贴合你的页面风格；
2. Pegman图标：如果不想用默认的箭头，可以替换icon配置为自定义图片，比如：

   icon: {
       url: './your-custom-pegman.png',
       size: new google.maps.Size(30, 30),
       anchor: new google.maps.Point(15, 15),
       rotation: mainPanorama.getPov().heading
   }
   

3. 缩放联动：如果想让迷你地图的缩放和主地图联动，可以添加zoom_changed监听：

   map.addListener("zoom_changed", function() {
       miniMap.setZoom(map.getZoom() - 2); // 迷你地图比主地图小2级缩放，可按需调整
   });
   

这样改完后，你进入街景模式时，左下角的迷你地图就会同步显示Pegman的位置和当前朝向；退出街景时，迷你地图会自动同步主地图的中心位置~

备注：内容来源于stack exchange，提问作者fk2007000