googlemap 之 javascript实现方法
这是一个很典型的一个background-position-x的应用。技术含量并不高,但是思想还是值得思考的,证明了DHTML方面有很多东西可以变通的。用背景用map,如果做得更复杂一些,用ajax动态的载入图片的背景,也是一个小型的map了。我不打算在此项深究,因为脚本的速度和效率是有瓶颈的。
预备知识:
background-position-x ------------- 背景图的X坐标。
background-position-y ------------- 背景图的Y坐标。
event.clientX ------------------------鼠标的X坐标。
event.clientY ------------------------鼠标的Y坐标。
JSON --------------------------------- 现在似乎很流行这个词,自从ajax in action出来后,更火了一把,从广义的角色上讲就是javascript的关联数组。JSON(JavaScript Object Notation) 也就是类似这样 var o={name:"never-online",web:"http://www.never-online.net",blog:"http://blog.never-online.net"}从而可以这样用o.name, o.web或者o['name'],o['web']这样的数组关系形式。
问题解决思路:
这个map的主要难点在于,坐标的准确性,也就是鼠标移动时得到background-position的坐标方向。
如果解决掉上面的这个问题,成功了一大半。
我采用惯用的方法
坐标=用鼠标移动后的坐标-原始我们存进的坐标。
原始坐标得到方法为:neverOnlineMap._wrapper.X = event.clientX-parseInt(x.backgroundPositionX);
即用鼠标当前位置-图像背景的X坐标
图片背景坐标=鼠标位置-原始位置
Y坐标和X坐标类似,不再重复。neverOnlineMap._wrapper.Y = event.clientY-parseInt(x.backgroundPositionY);
源码如下:
neverOnlineMap - http://www.never-online.net
//
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
JavaScript中实现Map的示例代码
不废话了,直接贴代码了. 代码一: var map=new Map(); map.put("a","A");map.put("b","B");map.put("c","C"); map.get("a"); //返回:A map.entrySet() // 返回Entity[{key,value},{key,value}] map.containsKey('kevin'
-
javascript实现的HashMap类代码
复制代码 代码如下: <script language = "javascript" > function HashMap() { /**Map大小**/ var size = 0; /**对象**/ var entry = new Object(); /**Map的存put方法**/ this.put = function(key, value) { if (!this.containsKey(key)) {
-
javascript+mapbar实现地图定位
本文地图使用的是图地图 图吧地图在线API地址http://union.mapbar.com/apidoc/离线CHM格式 下载地址: http://union.mapbar.com/apidoc/chm/mapbarapi.rar 效果图: Mapbar 地图 API 让您可以使用 JavaScript 将 Mapbar地图嵌入您自己的网页中.API 提供了许多方法与地图交互(正如http://www.mapbar.com/localsearch/index.html 网页上显示的),以及一系
-
Javascript计算两个marker之间的距离(Google Map V3)
Google Map V3 javascript计算两个marker之间的距离 做地图开发,最常用到的就是marker一些操作和交互.简单介绍一下,两个marker之间的距离计算. google map api 很方便的 只要是常用的 基本上都有接口. 1.创建两个marker点 复制代码 代码如下: var oldMarker = new google.maps.Marker({ position: new google.maps.LatLng("31.95678", "1
-
JavaScript mapreduce工作原理简析
谷歌在2003到2006年间连续发表了三篇非常有影响力的文章,分别是2003年在SOSP上发布的GFS,2004年在OSDI上发布的MapReduce,以及2006年在OSDI上发布的BigTable.GFS是文件系统相关的,其对后来的分布式文件系统设计具有指导意义:MapReduce是一种并行计算的编程模型,用于作业调度:BigTable是一个用于管理结构化数据的分布式存储系统,构建在GFS.Chubby.SSTable等Google技术之上.相当多的Google应用使用了这三种技术,比如Go
-
javascript实现简单的Map示例介绍
复制代码 代码如下: /* * MAP对象,实现MAP功能 * * 接口: * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, value) 向MAP中增加元素(key, value) * remove(key) 删除指定KEY的元素,成功返回True,失败返回False * get(key) 获取指定KEY的元素值VALUE,失败返回NULL * element(index) 获取指定索引的元素(使用e
-
Javascript中Array.prototype.map()详解
在我们日常开发中,操作和转换数组是一件很常见的操作,下面我们来看一个实例: 复制代码 代码如下: var desColors = [], srcColors = [ {r: 255, g: 255, b: 255 }, // White {r: 128, g: 128, b: 128 }, // Gray {r: 0, g: 0, b: 0 } // Black ]; for (var i = 0, ilen = sr
-
googlemap 之 javascript实现方法
这是一个很典型的一个background-position-x的应用.技术含量并不高,但是思想还是值得思考的,证明了DHTML方面有很多东西可以变通的.用背景用map,如果做得更复杂一些,用ajax动态的载入图片的背景,也是一个小型的map了.我不打算在此项深究,因为脚本的速度和效率是有瓶颈的. 预备知识: background-position-x ------------- 背景图的X坐标. background-position-y ------------- 背景图的Y坐标. event
-
JavaScript正则方法replace实现搜索关键字高亮显示
前言 正则表达式是字符串处理工具中强有力的工具.也有人认为这只是一个小玩具,但不管怎么说都离不开它. 这里介绍的是JavaScript的正则表达式的replace方法 ,和实现搜索关键字高亮的功能. 先介绍一下正则表达式的replace方法 replace介绍 w3school原文链接介绍 正则表达式如何使用特殊字符$来表示原来的文本,这是实现搜索高亮的关键, var str = "asad sad 123 sd qwe21"; str.replace(/\d+/img,"数
-
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
本文实例讲述了javascript另类方法实现htmlencode()与htmldecode()函数.分享给大家供大家参考,具体如下: 最常见的做法是采用正则表达式替换的方法,将特殊字符如 < > & 等进行替换,htmlencode的时候这样替换还比较容易,但发过来htmldecode的时候就不一定好用了,因为需要反转的情况很多,出了常见的<>&以外,还有 ©"®等数十个字符实体,还有AB中文或者中文之类以字符的Unicode编码的十进制或16进制表示的
-
JS 在数组插入字符的实现代码(可参考JavaScript splice() 方法)
复制代码 代码如下: Array.prototype.ArrayInsertAfter=function(Num,obj) { var tempArr=new Array(); var l=this.length; for(var i=0;i<l;i++) { tempArr.push(this.shift()); } l=tempArr.length; for(var i=0;i<l;i++) { this.push(tempArr.shift()); if(i==Num) { this.p
-
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
JavaScript charCodeAt 方法 charCodeAt 方法用于从字符串中取得指定位置字符的 Unicode 编码.其语法如下: 复制代码 代码如下: str_object.charCodeAt( x ) 参数说明: 参数 说明 str_object 要操作的字符串(对象) x 必需.表示位置的数字 提示:字符串是从 0 开始计数的. charCodeAt 方法实例 复制代码 代码如下: <script language="JavaScript"> docu
-
JavaScript数组方法大全(推荐)
数组在笔试中经常会出现的面试题,javascript中的数组与其他语言中的数组有些不同,为了方便之后数组的方法学习,下面小编给大家整理了关于数组的操作方法,一起看看吧. 数组创建 JavaScript中创建数组有两种方式,第一种是使用 Array 构造函数: var arr1 = new Array(); //创建一个空数组 var arr2 = new Array(20); // 创建一个包含20项的数组 var arr3 = new Array("lily","lucy&
-
JavaScript strike方法入门实例(给字符串加上删除线)
JavaScript strike 方法 strike 方法返回使用 HTML strike 标签属性定义的删除线样式的字符串.其语法如下: 复制代码 代码如下: str_object.strike() 提示:该方法不符合 ECMA 标准,不建议使用. strike 方法实例 复制代码 代码如下: <script language="JavaScript"> var str = "www.jb51.net"; document.write( str.st
-
JavaScript italics方法入门实例(把字符串显示为斜体)
JavaScript italics 方法 italics 方法返回使用 HTML i 标签属性定义的(斜体)字符串.其语法如下: 复制代码 代码如下: str_object.italics() 提示:该方法不符合 ECMA 标准,不建议使用. italics 方法实例 复制代码 代码如下: <script language="JavaScript"> var str = "www.jb51.net"; document.write( str.itali
-
浅谈JavaScript find 方法不支持IE的问题
最近在前端开发中,遇到一个JavaScript 的问题. <script type="text/javascript"> var arrayList = new Array(); arrayList.push(1); arrayList.push(2); arrayList.push(3); arrayList.push(4); arrayList.find(function (val) { if (val == 4) { console.log('This is a te
-
JavaScript 的方法重载效果
在 JavaScript 的方法内,有个叫做 arguments 的变量数组,它是只读的,所有实际传入的参数变量都 放在了里面,通过它,我们可以对传入的参数进行类型检查,从而实现重载的效果. 判断一个变量的类型有两种方法. 1,用 typeof 语句: 复制代码 代码如下: function check(){ if(typeof arguments[0] == 'string') alert('你传入的参数是个字符串'); else if(typeof arguments[0] == 'numb
随机推荐
- Shell逐行读取文件的4种方法
- 学习小实例--滚动条的简单实现
- MySQL连接无法解析HOST主机名的解决方法
- AngularJS 异步解决实现方法
- 第三方网站微信登录java代码实现
- Javascript中浏览器窗口的基本操作总结
- PHP+Ajax 检测网络是否正常实例详解
- 机器学习python实战之决策树
- 如何用C++实现双向循环链表
- js原型链与继承解析(初体验)
- 以前写的两个CSS树形菜单
- jQuery Ajax使用心得详细整理及注意事项
- Java中几个Reference常见的作用详解
- php读取sqlite数据库入门实例代码
- SQLSERVER ISNULL 函数与判断值是否为空的sql语句
- MSSQL 2005/2008 日志压缩清理方法小结
- 去除某些论坛帖子中自动添加的白色字体即乱码的方法
- php miniBB中文乱码问题解决方法
- 如何实现Java的ArrayList经典实体类
- 详解vue静态资源打包中的坑与解决方案