使用javascript添加Map弹窗

已于 2022-07-05 10:42:57 修改
阅读量377 收藏
点赞数
分类专栏： Javascrip 文章标签： javascript 前端 css
于 2022-05-24 17:35:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/firstlt0217/article/details/124950850
版权

使用javascript添加弹窗

方式1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="map"></div>
		<button onclick="clickStatus()">激活弹窗</button>
<script>
		
	let isInit=false;
	let addDiv = '';
	let addtitle = '';
	let addcontent = '';
	let addClose='';
	let flag=true;
	let initTool=function (frameDiv) {
		if (!isInit) {
			return 0;
		}
		//弹窗容器div
		const rightdiv = document.createElement('DIV');
		rightdiv.className = "tooltip-right";
		rightdiv.style = `
		position:absolute;
		min-width:380px;
		min-height:100px;
		max-height:400px;
		background:#f2f2f2;
		border-radius:10px;
		box-shadow: 2px 4px 5px #888888;
		`;

		//弹窗箭头div
		const arrow = document.createElement('DIV');
		arrow.className = "tooltip-arrow";
		arrow.style = `
		position:absolute;
		left:-24px;
		top:38px;
		width:0;
		height:0;
		border-top: 12px solid transparent;
		border-right: 12px solid #f2f2f2;
		border-bottom: 12px solid transparent;
		border-left: 12px solid transparent;`;
		rightdiv.appendChild(arrow);

		//标题div
		const title = document.createElement('DIV');
		title.className = "tooltip-title";
		title.style = `
		width:100%;
		height:30px;
		line-height:30px;
		font-size: small;
		text-align: left;
		border-bottom: 1px solid #777;
		padding: 0 0 0 0px;
		`
		rightdiv.appendChild(title);

		//close
		const close = document.createElement('DIV');
		close.className = "tooltip-close";
		close.style = `
		position:absolute;
		right:-5px;
		top:0px;
		width:30px;
		height:30px;
		line-height:30px;
		color: #4876ff;
		z-index:999;`
		rightdiv.appendChild(close);
		//内容div
		const content = document.createElement('DIV');
		content.className = "tooltip-content";
		content.style = `
		width:100%;
		box-sizing:border-box;
		padding:10px 0 10px 10px;
		word-break:break-all;
		`
		rightdiv.appendChild(content);

		addtitle = title;
		addcontent = content;
		addClose=close;
		addDiv = rightdiv;
		frameDiv.appendChild(rightdiv);
		isInit = true;

	}
	//控制弹窗显隐
	let setVisible=function (visible) {
		if (!isInit) {
			return 0;
		}
		addDiv.style.display = visible ? 'block' : 'none';
	}
	//控制弹窗定位
	let showAt=function (position, message, content) {
		if (!isInit) {
			return 0;
		}
		if (position && message && content) {
			setVisible(true);
			addtitle.innerHTML = message;
			addcontent.innerHTML = content;
			addClose.innerHTML = '&#10005';
			addDiv.style.left = position.x + 30 + "px";
			addDiv.style.top = (position.y - 50) + "px";
		}
	}
	let map=document.getElementById('map')
	let content=
		"<div><h5>管径：<span>" +
		'diameter' +"</span></h5></div>"+
		"<div><h5>起点号：<span>" +
		'startPoint'+"</span></h5></div>"+
		"<div><h5>起点埋深：<span>" +
		'startDeep'+"m</span></h5></div>" +
		"<div><h5>起点管线高程：<span>" +
		'starHeight'+"m</span></h5></div>"+
		"<div><h5>终点号：<span>" +
		'endPoint'+"</span></h5></div>"+
		"<div><h5>终点埋深：<span>" +
		'endDeep'+"m</span></h5></div>" +
		"<div><h5>终点管线高程：<span>" +
		'endHeight'+"m</span></h5></div>";
	let click=function(ev){
		console.log(ev);
		let position ={
			x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
			y:ev.clientY + document.body.scrollTop - document.body.clientTop
		}
		showAt(position, '设施概况', content);
	}
	function clickStatus(){
		isInit = !isInit;
		console.log(isInit);
		if(isInit){
			initTool(map)
			// document.οnclick= click  //添加事件
			document.addEventListener('click',click) //添加事件
			addClose.addEventListener('click', function () {
				isInit = !isInit;
				document.removeEventListener('click', click);//移除事件
				addDiv.style.display = 'none';
			})
		}else{
			// document.onclick = null //移除事件
			document.removeEventListener('click', click);//移除事件
		}
	}

</script>
</body>
	</body>
</html>

方式2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.ol-popup-facility {
				position: absolute;
				background-color: rgba( 255,255,255,.8 );
				-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
				filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
				padding: 15px;
				border-radius: 10px;
				border: 1px solid #cccccc;
				bottom: 12px;
				left: -50px;
				width: 420px;
				height: 300px;
				color: #7E8A9E;
			}
			.ol-popup-facility .popup-title{
				color: #7E8A9E;
				display: inline-block;
				font:15px arial,sans-serif;
				font-weight: bolder;
				height: 26px;
				font-size: 16px;
				letter-spacing: 1px;
				line-height: 26px;
			}
	
			.ol-popup-facility .popup-close{
				position:absolute;
				right:0px;
				top:10px;
				width:30px;
				height:30px;
				line-height:30px;
				color: #4876ff;
				z-index:200;
			}
			.ol-popup-facility:after, .ol-popup-facility:before {
				top: 100%;
				border: solid transparent;
				content: " ";
				height: 0;
				width: 0;
				position: absolute;
				pointer-events: none;
			}
	
			.ol-popup-facility:after {
				border-top-color: white;
				border-width: 10px;
				left: 48px;
				margin-left: -10px;
			}
	
			.ol-popup-facility:before {
				border-top-color: #cccccc;
				border-width: 11px;
				left: 48px;
				margin-left: -11px;
			}
	
		</style>
	</head>
	<body>
		<div id="map">
			<div id="popup" class="ol-popup-facility">
				<div id="popup-close" class="popup-close">&#10005;</div>
				<div id="popup-title" class="popup-title"></div>
				<div id="popup-content" class="popup-content"></div>
			</div>
		</div>
		<button onclick="clickStatus()">激活弹窗</button>
<script>
	let map=document.getElementById('map')
	let isInit=false;
	let addDiv = document.getElementById('popup')
	let addtitle = document.getElementById('popup-title')
	let addcontent = document.getElementById('popup-content')
	let addClose=document.getElementById('popup-close')
	addDiv.style.display = 'none';
	//控制弹窗显隐
	let setVisible=function (visible) {
		if (!isInit) {
			return 0;
		}
		addDiv.style.display = visible ? 'block' : 'none';
	}
	//控制弹窗定位
	let showAt=function (position, message, content) {
		if (!isInit) {
			return 0;
		}
		if (position && message && content) {
			setVisible(true);
			addtitle.innerHTML = message;
			addcontent.innerHTML = content;
			addClose.innerHTML = '&#10005';
			addDiv.style.left = position.x + 30 + "px";
			addDiv.style.top = (position.y - 50) + "px";
		}
	}
	let content=
		"<div><h5>管径：<span>" +
		'diameter' +"</span></h5></div>"+
		"<div><h5>起点号：<span>" +
		'startPoint'+"</span></h5></div>"+
		"<div><h5>起点埋深：<span>" +
		'startDeep'+"m</span></h5></div>" +
		"<div><h5>起点管线高程：<span>" +
		'starHeight'+"m</span></h5></div>"+
		"<div><h5>终点号：<span>" +
		'endPoint'+"</span></h5></div>"+
		"<div><h5>终点埋深：<span>" +
		'endDeep'+"m</span></h5></div>" +
		"<div><h5>终点管线高程：<span>" +
		'endHeight'+"m</span></h5></div>";
	let click=function(ev){
		console.log(ev);
		let position ={
			x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
			y:ev.clientY + document.body.scrollTop - document.body.clientTop
		}
		showAt(position, '设施概况', content);
	}
	function clickStatus(){
		isInit = !isInit;
		console.log(isInit);
		if(isInit){
			// document.οnclick= click  //添加事件
			document.addEventListener('click',click) //添加事件
			addClose.addEventListener('click', function () {
				isInit = !isInit;
				document.removeEventListener('click', click);//移除事件
				addDiv.style.display = 'none';
			})
		}else{
			addDiv.style.display = 'none';
			// document.onclick = null //移除事件
			document.removeEventListener('click', click);//移除事件
		}
	}

</script>
</body>
	</body>
</html>

方式1效果

在这里插入图片描述

方式2效果

在这里插入图片描述

不秃头的LT
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js实现map操作
mischen520的博客
07-05 1727
js实现map操作 mischen function Map() { this.elements = new Array(); this.size = function () { return this.elements.length;
【JavaScript】三种方式入手JS弹窗
最新发布
2401_84092868的博客
04-08 1684
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以领取。学不完的，最重要的是活着、不秃。
uniapp的map组件层级过高 覆盖弹窗
CheriseZhou的博客
10-14 4119
有什么问题欢迎大家提~目前在map组件上叠加openlayers图层还没琢磨出来，欢迎大佬指导~
openlayers实现地图弹窗
10-14
在本文中，我们将深入探讨如何使用OpenLayers库来实现在地图上显示弹窗的功能。OpenLayers是一个强大的JavaScript库，专门用于创建交互式地图应用，支持多种数据源和地图服务，包括WMS（Web Map Service）。 首先，...
uniapp_map组件
05-26
1. 创建地图：使用`L.map`初始化地图，指定容器ID，如： ```javascript const map = L.map('mapId').setView([51.505, -0.09], 13); // 经纬度和缩放级别 ``` 2. 加载地图服务：高德地图的瓦片服务需要通过...
PopupExtend 弹窗移动
12-05
PopupExtend 是一个专门为 ArcGIS ...通过 JavaScript 编程，我们可以轻松集成这个插件，为我们的地图应用添加自定义的拖动功能。对于任何需要灵活控制 infoWindow 位置的 ArcGIS 应用来说，这是一个非常有价值的工具。
elementor_map
03-25
通过JavaScript，你可以控制地图的显示、缩放、平移、标记添加以及各种自定义事件处理，如点击标记后的弹窗或者导航。 Elementor Map的主要特性可能包括： 1. **拖放界面**：Elementor的用户友好的界面使得添加地图...
Three.js前端3D开发：使用CSS3DRenderer渲染全景图
08-07
var material = new THREE.MeshBasicMaterial({ map: texture }); var geometry = new THREE.PlaneGeometry(2, 2, 1, 1); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); }); ``` 6. **设置...
在图片上用热点(map area)做弹出层（tips)
weixin_33860147的博客
03-10 403
2019独角兽企业重金招聘Python工程师标准>>> ...
JS 写弹窗
Benxiaohai_311的博客
12-08 3490
我们平常在项目中，通常需要给用户操作的结果进行提示，但是js默认给出的提示弹窗样式又比较丑，所以我们可以自己封装弹出层，用来给用户做不同的提示
js 创建弹出窗口
言小溪 的博客
03-13 739
【代码】js 创建弹出窗口。
JavaScript--弹窗
m0_74293254的博客
08-06 6878
JavaScript提供了几种常用的弹窗方法，用于与用户进行交互或显示提示消息。警告框（Alert）： 使用alert()方法创建一个警告框，它会显示一条消息并包含一个"确定"按钮。确认框（Confirm）： 使用confirm()方法创建一个确认框，它会显示一条消息并包含一个"确定"按钮和一个"取消"按钮。用户可以点击其中一个按钮来进行选择，并返回对应的布尔值结果（true表示点击了"确定"按钮，false表示点击了"取消"按钮）。提示框（Prompt）： 使用prompt()
JS按钮点击事件实现弹窗(popup)
热门推荐
zhansan的博客
02-10 2万+
click.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>click</title> <script> function buttonClick(){ window.confirm("你点击了按钮哦"); } </script&g
js自定义小弹窗
m0_62109588的博客
01-25 804
JavaScript自定义弹窗
js实现页面弹窗
奥特蛋的博客
03-25 1万+
js实现三种页面弹窗 1.alert()弹出个提示框 （确定） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function myFunction(){ alert("你好，我是一个警告框！"); } </script> </head> <body> <input type="button" onclick="myFuncti
行内元素去掉外边距
Bitter的博客
08-10 318
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document
JS函数自定义弹窗；纯JS实现弹窗
weixin_43286206的博客
02-09 857
JS函数自定义弹窗；纯JS实现弹窗
使用百度地图api，在地图上添加信息弹窗和按钮
06-07
要在百度地图API上添加信息弹窗和按钮，可以按照以下步骤进行： 1. 创建信息窗口和按钮的 HTML 代码，如下所示： ```html <div id="map"> <!-- 信息窗口 --> ;width:200px;height:100px;"> 这里是信息窗口 点击...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不秃头的LT

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值