最简单的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;
}

标签：小屏,google,const,地图,全屏,legend,标注
来源： https://blog.51cto.com/u_15275953/2927521