基于GoogleMap，Mapabc，51ditu，VirtualEarth，YahooMap Api接口的Jquery插件的通用实现（含源代码下载） --转...

作者：Leepy

邮箱：sunleepy(AT)gmail.com

出处：http://liping13599168.cnblogs.com/

框架介绍

Jquery是一个轻量级，快速简洁的Javascript框架，它的容量小巧，压缩后的js文件只有31k，简洁和简短的语法，容易记；用户能更方便地处理HTML DOM、Events、实现动画效果，并且提供Ajax的支持。

插件思想

利用Jquery的插件机制，这里先介绍最简单的插件形成：

首先新建jquery.sayHi.js做为sayHi功能的插件文件（jquery插件命名规则没有限制，这里推荐使用jquery.XX.js的命名方式）

Jquery插件机制的基本结构如下：

(function($){
//…
})(jQuery);

现在添加我们的sayHi功能：

(function($){
$.sayHi = function(name) { alert("I say hi to " + name); }
})(jQuery);

然后在页面上引用jquery.sayHi.js，当然jquery.js也要引用：

最终显示结果为：“I say hi to cnblogs”的提示框；

嗯，上面是调用全局的方法，如果要利用DOM元素来调用方法呢，这里介绍要使用 $.fn.方法名：

再看下面的例子：

这里设置一个文本框是否只读的方法插件 jquery.setReadOnly.js

(function($){
    $.fn.setReadOnly = function(_isReadOnly){
        return this.filter("input:text")
            .attr("readonly", _isReadOnly)
            .css("opacity", _isReadOnly ? 0.5 : 1.0);
    }
})(jQuery);

然后在页面上引用jquery.setReadOnly.js：

最终显示结果为：txt文本框设置为只读；

如果在jquery插件文件中要扩展更多的全局属性和方法以及更多的DOM元素属性和方法，还可以通过$.extend(object)和$.fn.extend(object)方法来设置，按照上面的例子可以表示：

$.extend(
{
    name : "",
    sayHi : function(name) { this.name = name; alert("I say hi to " + name); },
    sayGoodbye : function() { alert("I say goodbye to " + this.name); }
});

调用插件方法：$.sayHi(“cnblogs”);$.sayGoodbye();

和

$.fn.extend(
{
    isReadOnly : false,
    setReadOnly : function(_isReadOnly) {
        isReadOnly = _isReadOnly;
        return this.filter("input:text”)
            .attr(“readonly”, _isReadOnly)
            .css(“opacity”, _isReadOnly ? 0.5 : 1.0);
   },
   getReadOnly : function() {
       return isReadOnly;
   }
});

调用插件方法：$(“#txt”).setReadOnly(true).getReadOnly()

主要思路

嗯，基本Jquery插件机制的使用方法就是如此简单，现在开始介绍我的基于各类电子地图提供的api来设计通用的jquery插件：

先看js文件结构如下：

1．首先查看各大电子地图网站（可调用api接口），这里我查看了这些网站的api调用文档，我整理出来下：

http://code.google.com/intl/en/apis/maps/documentation/introduction.html

http://code.google.com/intl/zh-CN/apis/maps/documentation/index.html

http://api.51ditu.com/docs/index.html

http://developer.yahoo.com/maps/

http://dev.live.com/virtualearth/sdk/

要查看更多api，请链接http://www.programmableweb.com/apis

2．设计jquery插件调用构架，我这里用了两个功能函数，InitMap函数和OpenInfoWindow函数，第一个就是初始化地图显示，第二个就是根据经纬度在地图上标注坐标点（点上可编写任何Html文本内容）

初始化地图代码为：

$("#map").InitMap(
{
    maptype : "h",    //h, r
    overview : true,
    navscale : "large", //small, large
    center :
    {
        lat : 24.898817,
        lng : 118.598643,
        zoom : 7
    }
});

其中maptype为地图显示的是街道还是卫星地图（各地图api的常量会有所不同），overview为是否显示鹰眼图，navscale为地图上一些控件（如放大缩小）的显示模式，center为初始化中心点位置（lat纬度，lng经度，zoom缩放比例）

在地图上标注坐标点为：

var marker = $("#map").OpenInfoWindow(
{
     point :
     {
          lat : lat,
          lng : lng
     },
     info : "<center><img src=images/q1z_001.png /><br>蓝水晶</center>",
     icon :
     {
          url : "images/marker.gif",
          width : 20,
          height: 20
     }
});

其中point为在地图上标注的经纬度作标点，info为该点上的弹出框的Html文本内容，icon为指示该点显示的图标点；

3．好了，有了上面通用的基本构架，那我们就可以来写基于各个地图api接口的jquery插件了。

详细源代码，请在文章的最后下载我的文件链接；

这里给大家看下效果图：

源代码下载

转载于:https://www.cnblogs.com/weixing/archive/2012/06/28/2567074.html

基于GoogleMap，Mapabc，51ditu，VirtualEarth，YahooMap Api接口的Jquery插件的通用实现（含源代码下载） --转...相关推荐

yii2 提供接口给java_Yii2 基于RESTful架构的 advanced版API接口开发配置、实现、测试（转）...
环境配置: 开启服务器伪静态本处以apache为例,查看apache的conf目录下httpd.conf,找到下面的代码 LoadModule rewrite_module modules/mod_ ...
API接口的加速利器-varnish使用大全(含生产集群环境布署)
Varnish是什么这是一张标准的新零售行业中的微服务化组件从前到后的架构概览图. 我们都知道,凡是静态内容,一般我们都有cdn来进行缓存,cdn缓过的内容之前会从cdn处返回给到前端流量层客户端. ...
基于HTML5 SVG可互动的3D标签云jQuery插件
svg3dtagcloud.js是一款基于HTML5 SVG的3D标签云jQuery插件.该3D标签云插件不需要额外的CSS样式,可使用鼠标与标签进行互动,并提供很多参数来控制标签云的外观. 效果演示 ...
PHP API接口GETPOST请求封装（通用）
GET /*** 通过URL获取页面信息* @param $url 地址* @return mixed 返回页面信息*/ function get_url($url) {$ch = curl_init ...
ncm 汇集 matlab,ncm-solutions 压缩包中的文件主要是基于matlab的数值计算以及分析功能学习的很好的例程 266万源代码下载- www.pudn.com...
文件名称: ncm-solutions下载收藏√ [ 5 4 3 2 1 ] 开发工具: matlab 文件大小: 1650 KB 上传时间: 2016-11-01 下载次数: 0 提 ...
惯性gps组合导航matlab,Strong-tracking-filter 基于强跟踪滤波算法的惯性加GPS组合导航matlab仿真程序 238万源代码下载- www.pudn.com...
文件名称: Strong-tracking-filter下载收藏√ [ 5 4 3 2 1 ] 开发工具: matlab 文件大小: 82 KB 上传时间: 2013-09-01 下载次数 ...
java建设银行支付_cbcPayment 建设银行Java支付接口详细说明文档dsdsdds Develop 240万源代码下载- www.pudn.com...
文件名称: cbcPayment下载收藏√ [ 5 4 3 2 1 ] 开发工具: Java 文件大小: 4099 KB 上传时间: 2015-07-10 下载次数: 0 提供者: ...
基于Django实现Linux运维管理平台的整个实现过程和各种API接口调用以及Echarts绘图项目介绍（一）记录点滴生活
基于Django实现Linux运维管理平台整个实现过程和各种API接口调用以及Echarts绘图的使用介绍项目内容涉及技术直通车: 我的项目仓库:MyGitHub https://github.co ...
API接口之JWT设置token过期时间（二）
目录 1.什么是Jwt 2.token是什么 3.为什么要使用token 4.如何实现token 5.JWT的简单案例 6.API接口token案例 6.1 token的创建 6.2 用户验证流程 7 ...
人人都是接口开发大师，这个开源项目花5分钟就可以开发一个API接口
PhalApi开源接口框架读音:派框架,官网:https://www.phalapi.net/ PhalApi是一个PHP轻量级开源接口框架,致力于快速开发接口服务.支持HTTP/SOAP/RPC等 ...

基于GoogleMap，Mapabc，51ditu，VirtualEarth，YahooMap Api接口的Jquery插件的通用实现（含源代码下载） --转...

基于GoogleMap，Mapabc，51ditu，VirtualEarth，YahooMap Api接口的Jquery插件的通用实现（含源代码下载） --转...相关推荐

最新文章

热门文章