前端自定义地图

雨点打透心脏的1/2处 2023-06-27 03:22 1阅读 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, "&");
    					s = s.replace(/</g, "<");
    					s = s.replace(/>/g, ">");
    					s = s.replace(/ /g, " ");
    					s = s.replace(/\'/g, "'");
    					s = s.replace(/\"/g, """);
    					return s;
    				},
    				/*2.用正则表达式实现html解码*/
    				htmlDecodeByRegExp: function(str) {
    					var s = "";
    					if(str.length == 0) return "";
    					s = str.replace(/&/g, "&");
    					s = s.replace(/</g, "<");
    					s = s.replace(/>/g, ">");
    					s = s.replace(/ /g, " ");
    					s = s.replace(/'/g, "\'");
    					s = s.replace(/"/g, "\"");
    					return s;
    				},
    				htmlFix: function(str) {
    					str = str.replaceAll(""", '"');
    					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>