效果图：
image.png
js代码
window.onload = function() {//页面一加载调用
bindEvent();
loadMark();
document.getElementById("clearpin").addEventListener("click", function() {//点击清除按钮
clearMark();
});
var container = getid('container');
console.log("container:", container)
var reg = new RegExp('"',"g");
var map = document.getElementById("map");
var canvasNew = document.createElement('canvas');
var Newimage = document.createElement('img');
var context = canvasNew.getContext('2d');
var imgData = localStorage.getItem('pdfsaveimg');
var pdfPageIndex = localStorage.getItem('pageindex');
var canvasWidth = localStorage.getItem('imgWidth');
var canvasHeight = localStorage.getItem('imgHeight');
console.log("pdfPageIndex", pdfPageIndex);
console.log("Width, Height", canvasWidth, canvasHeight);
console.log("canvasNew", canvasNew);
Newimage.src = imgData;
container.style.width = canvasWidth + 'px'
container.style.height = canvasHeight + 'px'
container.style.margin = "40px auto"
map.appendChild(Newimage);
};
var arr = [];
var mark = {}; //创建一个对象，
function getid(id) { //封装函数，通过id获取该id的html标签对象
return document.getElementById(id);
}
function getOffset(obj) {//封装坐标函数
var x = 0,
y = 0;
while(obj) {
x += obj.offsetLeft;//offsetLeft返回的就是元素距离父元素左边的距离，单位是像素
y += obj.offsetTop;//offsetTop返回的就是元素距离父元素上边的距离，单位是像素
obj = obj.offsetParent;//指定的父元素
}
return {//返回x和y的坐标
x: x,
y: y
};
}
function addMark(p, x, y, text_val, index) {//封装创建小红点和输入文字内容的函数
var div = document.createElement("div");//创建div元素
div.id = "mark" + index;//给div元素添加id
div.className = "mark";//给div元素添加class
div.style.left = x + "px";//div的css属性
div.style.top = y + "px";
p.appendChild(div);//把这个div元素追加到传过来的元素的下面
var content_p = document.createElement("p");
content_p.className = "content_p";
console.log("text_val::" + text_val);
content_p.innerHTML = text_val;//给p标签添加内容
content_p.id = "content_p" + index;
content_p.style.left = x + "px";
content_p.style.top = y + "px";
p.appendChild(content_p);
}
function addInput(p, x, y, index) {//封装创建输入框和确认按钮的函数
var div = document.createElement("div");
div.id = "input_div" + index;
div.className = "mark_input";
div.style.left = x + 5 + "px";
div.style.top = y + "px";
var inp = document.createElement("input");
inp.id = "mark_input";
inp.className = "text_input";
inp.type = "text";
inp.value = "";
var inp2 = document.createElement("input");
inp2.id = "sub_input";
inp2.className = "sub_input";
inp2.type = "submit";
inp2.value = "OK";
div.appendChild(inp);
div.appendChild(inp2);
p.appendChild(div);
console.log(div)
}
function bindEvent() {
getid("map").onclick = function(oEvent) { //点击图片时调用
console.log(arr);
oEvent = oEvent || event;
var container = getid("container");
var offset = getOffset(container); //调用getOffset函数
console.log(offset.y);
console.log(oEvent.clientY);
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
console.log(scrollTop);
var x = oEvent.clientX - offset.x; //用浏览器窗口的可视区域减去getOffset函数返回的x值
var y = oEvent.clientY - offset.y + scrollTop;
addInput(container, x, y, arr.length);
var i = arr.length;
getid("sub_input").onclick = function() {//点击确认按钮时调用
console.log(arr);
text_val = getid("mark_input").value;//输入框内容
container.removeChild(getid("input_div" + i));//删除container元素下面的input_div
console.log(text_val);
addMark(container, x, y, text_val, arr.length);//创建内容
mark.x = x;
mark.y = y;
mark.text_val = text_val;
arr = sessionStorage['arr'] //获取本地存储里面的值
if(arr !='' && arr != undefined){
arr = JSON.parse(arr)
}else{
arr = [];
console.log('本地存储没有值')
}
console.log(mark)
arr.push(mark);//把x，y坐标和文字内容放到数组里面
console.log(arr);
saveMark();//调用本地存储的函数
}
};
}
function saveMark() {//封装本地存储的函数
arr = JSON.stringify(arr);
console.log('保存至对话存储', arr);
sessionStorage['arr'] = arr;
pin_ajax();
}
function loadMark() {//页面一加载的时候调用这个函数
var arr = sessionStorage['arr']//获取本地存储里面的值
if(arr !='' && arr != undefined){
console.log(arr)
arr = JSON.parse(arr)
}else{
arr = [];
console.log('本地存储没有值')
}
console.log(arr)
if(arr) {//判断本地存储里面是否有值
var container = getid("container");
for(var i = 0; i < arr.length; i++) {
console.log(arr[i])
addMark(container, arr[i].x, arr[i].y, arr[i].text_val, i);//在页面上创建和本地存储对应的内容
}
}
}
function clearMark() {//点击清楚标记时调用
arr = sessionStorage['arr'] //获取本地存储里面的值
if(arr !='' && arr != undefined){
arr = JSON.parse(arr)
}
if(arr.length === 0) {
alert('标记已全部清除')
} else {
var container = getid("container");
var i = arr.length - 1;
console.log(i);
container.removeChild(getid("mark" + i));
container.removeChild(getid("content_p" + i));
arr.length = arr.length - 1;
saveMark();
}
}
}
以下是html代码
<div class="bg">
<div id="container" >
<div id="map">
</div>
</div>
</div>
以下是css代码
* {
margin: 0;
padding: 0;
}
#container {
position: relative;
margin-left: 20px;
margin-top: 30px;
width: 1200px;
height: 800px;
border: 1px solid #CCC;
overflow: hidden;
}
#map {
position: absolute;
}
.mark {
position: absolute;
width: 20px;
height: 20px;
font-size: 0px;
background: url("/img/td.png") no-repeat left center;
background-size:100% ;
}
.mark_input {
position: absolute;
}
.content_p {
position: absolute;
height: 20px;
line-height: 20px;
margin-top: -7px;
margin-left: 22px;
padding:3px 10px 23px 10px;
border: 1px solid blue;
background-color: #fff;
}
#clear{
margin-left: 50px;
}
