最简单的Google地图实现全屏在地图内部下方增加标注,小屏将标注显示在地图外面

最简单的方法实现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;
}

 

上一篇:精选10款Python可视化工具,请查收


下一篇:matplotlib笔记10——plotnine(图层共享的概念)