js实现自己的网页地图可添加自己的标准和事件资源-CSDN文库

共11个文件

html：5个

jpg：2个

gif：2个

自己的地图

可拖动的地图

可编辑的地图

添加地图标志

4星 · 超过85%的资源需积分: 9 119 浏览量 2010-12-29 17:29:10 上传评论 1 收藏 823KB RAR 举报

在JavaScript（js）中实现自己的网页地图功能，不仅可以提供一种个性化的方式来展示地理位置信息，还能让用户在地图上自由地添加和操作各种自定义元素，如建筑标志。这种技术在Web开发中有着广泛的应用，例如在房地产网站、旅游平台或城市规划项目中。下面将详细介绍如何通过JavaScript来创建这样的可编辑地图，以及相关的技术要点。 1. **基础地图框架搭建**：我们需要一个地图的基础框架。可以选择开源的库，如Leaflet或OpenLayers，它们提供了丰富的地图API，支持各种地图服务，如谷歌地图、高德地图等。通过引入这些库的JavaScript文件，我们可以快速创建一个基本的交互式地图。 2. **地图拖动功能**：实现地图拖动功能主要涉及监听用户的鼠标事件。当用户按下鼠标并移动时，我们需要更新地图的中心点，使得地图跟随鼠标移动。这可以通过监听`mousedown`、`mousemove`和`mouseup`事件，计算鼠标的偏移量，并相应调整地图的视口位置来实现。 3. **添加自定义标志**：在地图上添加自定义建筑标志通常需要创建SVG图形或者使用图片作为标志。我们可以创建HTML元素（如`div`或`img`），然后设置其位置为地图上的特定坐标。使用JavaScript的DOM操作方法，如`createElement`、`appendChild`和`style`属性，我们可以动态地在地图上添加、删除或修改这些标志。 4. **标志上的事件绑定**：为了在标志上实现自定义方法，我们需要为每个标志元素绑定点击或其他类型的事件处理器。例如，可以使用`addEventListener`方法添加事件监听器，当用户点击标志时执行特定的函数，如弹出信息窗口或触发交互操作。 5. **地图交互与动画**：为了让地图更具交互性，我们可以添加更多的用户交互元素，如缩放控件、比例尺等。同时，利用JavaScript的动画库（如requestAnimationFrame）可以创建平滑的缩放和拖动效果，提升用户体验。 6. **地理编码与反编码**：为了将地址转换为经纬度坐标（反之亦然），我们可以使用地图服务提供的地理编码API。这在用户输入地址时自动定位到对应位置非常有用。 7. **数据存储与同步**：如果用户添加的标志需要持久化保存，我们可以利用浏览器的localStorage或 IndexedDB 存储数据。在用户下次访问时，可以读取这些数据并重新绘制标志。如果需要在多个设备间同步，还可以考虑使用云数据库或WebSockets进行实时通信。 8. **性能优化**：随着地图上标志数量的增加，性能可能会成为问题。为了避免过多的DOM操作，可以使用分块加载（clustering）技术，只在可视区域内显示标志，其他标志则在视口外隐藏。通过以上步骤，我们便能构建一个具备拖动、添加自定义标志功能的网页地图。这个过程涉及到JavaScript编程、DOM操作、事件处理、地理信息处理等多个方面的技术，需要开发者具备扎实的Web开发基础和一定的地理信息系统（GIS）知识。在实际开发中，可以根据具体需求进行功能扩展和优化，以满足不同的应用场景。

资源推荐

资源详情

资源评论

收起资源包目录

ditu.rar （11个子文件）

ditu

世界主城-终.jpg 746KB

room.png 3KB

Untitled-1.html 2KB

dt.jpg 75KB

ditu.html 9KB

factory.gif 2KB

Untitled-2.html 2KB

tz.html 9KB

Untitled-4.html 10KB

light.gif 379B

f.png 2KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>拖放效果</title> </head> <body style="margin-top:0px"> <script> var picWidth = 960; // 大图的宽高 var picHeight = 1200; var x,y // 鼠标点下去时背景的坐标 var x_new,y_new //位移 var isIE = (document.all) ? true : false; var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } } var Bind = function(object, fun) { return function() { return fun.apply(object, arguments); } } var BindAsEventListener = function(object, fun) { return function(event) { return fun.call(object, (event || window.event)); } } var CurrentStyle = function(element){ return element.currentStyle || document.defaultView.getComputedStyle(element, null); } function addEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = fnHandler; } }; function removeEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.removeEventListener) { oTarget.removeEventListener(sEventType, fnHandler, false); } else if (oTarget.detachEvent) { oTarget.detachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = null; } }; //拖放程序 var Drag = Class.create(); Drag.prototype = { //拖放对象 initialize: function(drag, options) { this.Drag = $(drag);//拖放对象 this._x = this._y = 0;//记录鼠标相对拖放对象的位置 this._marginLeft = this._marginTop = 0;//记录margin //事件对象(用于绑定移除事件) this._fM = BindAsEventListener(this, this.Move); this._fS = Bind(this, this.Stop); this.SetOptions(options); this.Limit = !!this.options.Limit; this.mxLeft = parseInt(this.options.mxLeft); this.mxRight = parseInt(this.options.mxRight); this.mxTop = parseInt(this.options.mxTop); this.mxBottom = parseInt(this.options.mxBottom); this.LockX = !!this.options.LockX; this.LockY = !!this.options.LockY; this.Lock = !!this.options.Lock; this.onStart = this.options.onStart; this.onMove = this.options.onMove; this.onStop = this.options.onStop; this._Handle = $(this.options.Handle) || this.Drag; this._mxContainer = $(this.options.mxContainer) || null; this.Drag.style.position = "absolute"; //透明 if(isIE && !!this.options.Transparent){ //ie6渲染bug this._Handle.style.overflow = "hidden"; //填充拖放对象 with(this._Handle.appendChild(document.createElement("div")).style){ width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)"; } } //修正范围 this.Repair(); addEventHandler(this._Handle, "mousedown", BindAsEventListener(this, this.Start)); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Handle: "",//设置触发对象（不设置则使用拖放对象） Limit: false,//是否设置范围限制(为true时下面参数有用,可以是负数) mxLeft: 0,//左边限制 mxRight: 9999,//右边限制 mxTop: 0,//上边限制 mxBottom: 9999,//下边限制 mxContainer: "",//指定限制在容器内 LockX: true,//是否锁定水平方向拖放 LockY: false,//是否锁定垂直方向拖放 Lock: false,//是否锁定 Transparent: false,//是否透明 onStart: function(){},//开始移动时执行 onMove: function(){},//移动时执行 onStop: function(){}//结束移动时执行 }; Extend(this.options, options || {}); }, //准备拖动 Start: function(oEvent) { if(this.Lock){ return; } this.Repair(); //记录鼠标相对拖放对象的位置 this._x = oEvent.clientX - this.Drag.offsetLeft; this._y = oEvent.clientY - this.Drag.offsetTop; //记录margin this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0; this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0; //mousemove时移动 mouseup时停止 addEventHandler(document, "mousemove", this._fM); addEventHandler(document, "mouseup", this._fS); if(isIE){ //焦点丢失 addEventHandler(this._Handle, "losecapture", this._fS); //设置鼠标捕获 this._Handle.setCapture(); }else{ //焦点丢失 addEventHandler(window, "blur", this._fS); //阻止默认动作 oEvent.preventDefault(); }; if(document.all) { x = document.body.scrollLeft+event.clientX; y = document.body.scrollTop+event.clientY; }else { x = event.layerX; y = event.layerY; } haveclick = true; //附加程序 this.onStart(); }, //修正范围 Repair: function() { if(this.Limit){ //修正错误范围参数 this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth); this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight); //如果有容器必须设置position为relative来相对定位，并在获取offset之前设置 !this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative"); } }, //拖动 Move: function(oEvent) { //判断是否锁定 if(this.Lock){ this.Stop(); return; }; //清除选择 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //设置移动参数 var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y; //设置范围限制 if(this.Limit){ //设置范围参数 var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom; //如果设置了容器，再修正范围参数 if(!!this._mxContainer){ mxLeft = Math.max(mxLeft, 0); mxTop = Math.max(mxTop, 0); mxRight = Math.min(mxRight, this._mxContainer.clientWidth); mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight); //alert(mxTop+"------"+mxBottom+"---------"+ (mxBottom - this.Drag.offsetHeight));//现在是有容器 }; //alert(iTop+"------"+mxBottom+"---------"+ (mxBottom - this.Drag.offsetHeight)) //修正移动参数 iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft); iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop); } //设置位置，并修正margin if(haveclick) { if(document.getElementById('pic').style.backgroundPosition.length==0) {document.getElementById('pic').style.backgroundPosition="0px 0px";} if(document.all) { y_new = document.body.scrollTop+event.clientY; } else { y_new = event.layerY; } y2=this.Drag.offsetTop-300; if (y2>0) y2=0; if (y2<-picHeight+800) y2=-picHeight+800; document.getElementById('pic').style.backgroundPosition="0px "+y2+"px"; } if(iTop>-101 && iTop<301) { if(!this.LockX){ this.Drag.style.left = iLeft - this._marginLeft + "px"; } if(!this.LockY){ this.Drag.style.top = iTop - this._marginTop + "px"; } } //附加程序 this.onM

评论收藏

内容反馈