制作地图功能,我暂时只有两个思路,第一种,利用移动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>