前端自定义地图

最新推荐文章于 2024-06-12 11:33:32 发布

不善言谈者

最新推荐文章于 2024-06-12 11:33:32 发布

阅读量2.7k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/bushanyantanzhe/article/details/103807203

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

制作地图功能,我暂时只有两个思路,第一种,利用移动div,第二种,利用标签map和area的组合
第一种,移动div,当用户需要生成地图链接时,生成一个可移动化,大小可变的div,由用户自行拖动和改变大小,当用户确定好位置和大小后,让用户输入需要的链接
最后,再将整个页面进行转码存到数据库中,前端展示时,将转码的数据取出再解码就行了.
第二种,map标签,给用户几个框,分别是形状,大小,链接等,当用户填完数据点击保存时,生成对应的area标签即可.最后也是转码和解码的操作

	下面则是第二种方法的简单例子

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>热点地图</title>

		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

		<script>
			/*document.addEventListener('click', function(e) {
																									//alert("隐藏")
																									e = e || window.event;
																									alert('x=' + e.screenX + ",y=" + e.screenY)

																								}, false);*/
			function getMousePos(e) {

				//alert('X：' + e.offsetX + '\n Y:' + e.offsetY);
				if(dfN !== "") {
					$("#" + dfN).val(e.offsetX + "," + e.offsetY);
				}
				dfN = "";
			}

			function addArea() {

				   
				var mainDiv = document.getElementById("mapList");

				    
				var area = document.createElement("area");

				  
				var xz = $("#xz").val();
				area.shape = xz;

				  
				var coods = $("#leftZB").val() + "," + $("#rightZB").val()
				area.coords = coods;
				area.alt = "sun";   
				area.href = "https://www.baidu.com"
				mainDiv.appendChild(area);

			}
			var dfN = "";

			function getValue(fdName) {
				dfN = fdName;
			}

			function saveHtml() {
				var mapDivHtml = HtmlUtil.htmlEncodeByRegExp($("#mapDivHtml").html());//转码
				alert(mapDivHtml)
				$("#mapDivHtmlVal").val(mapDivHtml)
				//将值保存到数据库
			}
			
			function loadHtml(){
				//将数据库取出的值转码成页面显示
				var mapDivHtml = HtmlUtil.htmlDecodeByRegExp($("#mapDivHtmlVal").val());//转码
				alert(mapDivHtml)//解码
				$("#loadHtmlDiv").html(mapDivHtml);
			}
			//转码和解码
			var HtmlUtil = {
				/*1.用正则表达式实现html转码*/
				htmlEncodeByRegExp: function(str) {
					var s = "";
					if(str.length == 0) return "";
					s = str.replace(/&/g, "&amp;");
					s = s.replace(/</g, "&lt;");
					s = s.replace(/>/g, "&gt;");
					s = s.replace(/ /g, "&nbsp;");
					s = s.replace(/\'/g, "&#39;");
					s = s.replace(/\"/g, "&quot;");
					return s;
				},
				/*2.用正则表达式实现html解码*/
				htmlDecodeByRegExp: function(str) {
					var s = "";
					if(str.length == 0) return "";
					s = str.replace(/&amp;/g, "&");
					s = s.replace(/&lt;/g, "<");
					s = s.replace(/&gt;/g, ">");
					s = s.replace(/&nbsp;/g, " ");
					s = s.replace(/&#39;/g, "\'");
					s = s.replace(/&quot;/g, "\"");
					return s;
				},
				htmlFix: function(str) {
					str = str.replaceAll("&quot;", '"');
					return str.replaceAll(" ", ' ');
				}

			};
		</script>
	</head>

	<body>
		<div>

			<div><span>形状</span>
				<select name="xz" id="xz">
					<option value="rect">矩形</option>
					<option value="circle">圆形</option>
					<option value="0">其它形状</option>
				</select>
			</div>
			<div>
				<div><span>左上角坐标</span><input type="text" name="leftZB" id="leftZB" value="" onclick="getValue('leftZB')" /></div>
				<div><span>右下角坐标</span><input type="text" name="rightZB" id="rightZB" value="" onclick="getValue('rightZB')" //></div>
			</div>
			<div>
				<div><span>圆形坐标</span><input type="text" name="cricleBJ" id="cricleBJ" value="" /></div>
				<div><span>半径</span><input type="text" name="cricleBJ" id="cricleBJ" value="" /></div>
			</div>
			<div><button onclick="addArea()">确定</button></div>
		</div>
		<div id="mapDivHtml">
			<p>技术战略</p>

			<img src="img/8ab402be09d3b049470b7df0acb9ffe1d205.bmp" width="800" height="450" alt="Planets" usemap="#planetmap" id="imgtest" onclick="getMousePos(event)">

			<map name="planetmap" id="mapList">
</map>
		</div>

		<button onclick="saveHtml()">保存设置</button>
		<textarea id="mapDivHtmlVal" name="mapDivHtmlVal"></textarea>
		<div id="loadHtmlDiv"></div>
	</body>

</html>

不善言谈者

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端自定义地图

制作地图功能,我暂时只有两个思路,第一种,利用移动div,第二种,利用标签map和area的组合第一种,移动div,当用户需要生成地图链接时,生成一个可移动化,大小可变的div,由用户自行拖动和改变大小,当用户确定好位置和大小后,让用户输入需要的链接最后,再将整个页面进行转码存到数据库中,前端展示时,将转码的数据取出再解码就行了.第二种,map标签,给用户几个框,分别是形状,大小,链接等,当...
复制链接

扫一扫

专栏目录