小言_互联网的博客

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

2021-01-18 13:22 270人阅读  评论(0)

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

转载：https://blog.csdn.net/weixin_43606158/article/details/111318145
查看评论
* 以上用户言论只代表其个人观点，不代表本网站的观点或立场