最简单的方法实现Google地图实现全屏在地图内部下方增加标注,小屏将标注显示在地图外面
React代码
自己引入一下google地图
import React, { useEffect } from 'react';
function Map() {
const mapRef = React.createRef();
useEffect(() => {
// 创建一个标注图
const legend = document.createElement('div');
legend.innerHTML = `<div
id="map_legend"
>
自己正常写你的标注内容在这里
</div>`;
// 创建一个地图
const gmap = new window.google.maps.Map(mapRef.current, {
zoom: 3,
});
gmap.controls[window.google.maps.ControlPosition.BOTTOM_CENTER].push(legend);
}, []);
return (
<div ref={mapRef} />
);
}
Css代码
#map_legend { /* 非全屏的时候隐藏 */
opacity: 0;
}
:-webkit-full-screen #map_legend { /* 全屏的时候展示 */
opacity: 1!important;
}