如何在Google Maps上浮动div并保持全屏显示？

在Google Maps上浮动div并保持全屏显示，可以通过以下步骤实现：

首先，确保你已经引入了Google Maps的API，并在页面上创建了一个地图容器。
创建一个div元素，用于浮动在地图上。设置该div的样式为position: absolute，并设置其初始位置和大小。
使用JavaScript获取地图容器的宽度和高度，并将其应用于浮动div的样式中，以确保div与地图容器大小一致。
使用Google Maps的事件监听器，监听地图的"bounds_changed"事件。在该事件触发时，更新浮动div的位置，使其保持在地图的可视区域内。

下面是一个示例代码：

HTML部分：

<div id="map"></div>
<div id="floatingDiv"></div>

CSS部分：

#map {
  width: 100%;
  height: 100%;
}

#floatingDiv {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border-radius: 5px;
  z-index: 1;
}

JavaScript部分：

// 创建地图
var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 37.7749, lng: -122.4194}, // 设置地图中心点坐标
  zoom: 12 // 设置地图缩放级别
});

// 创建浮动div
var floatingDiv = document.getElementById('floatingDiv');

// 更新浮动div的位置和大小
function updateFloatingDiv() {
  var mapWidth = document.getElementById('map').offsetWidth;
  var mapHeight = document.getElementById('map').offsetHeight;
  floatingDiv.style.width = mapWidth * 0.2 + 'px'; // 设置浮动div的宽度为地图宽度的20%
  floatingDiv.style.height = mapHeight * 0.2 + 'px'; // 设置浮动div的高度为地图高度的20%
  floatingDiv.style.top = mapHeight * 0.1 + 'px'; // 设置浮动div的top位置为地图高度的10%
  floatingDiv.style.left = mapWidth * 0.1 + 'px'; // 设置浮动div的left位置为地图宽度的10%
}

// 监听地图的bounds_changed事件，更新浮动div的位置
google.maps.event.addListener(map, 'bounds_changed', function() {
  updateFloatingDiv();
});

// 初始化时更新浮动div的位置
updateFloatingDiv();

这样，浮动div就会在Google Maps上浮动，并保持全屏显示。你可以根据需要调整浮动div的样式和位置。