百度地图 api 功能封装类 (ZMap.js) 新增管理事件功能 [源码下载]

ZMap 功能说明

ZMap.js 本类方法功能大多使用 prototype 原型 实现;

包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,
从经纬度获取地址信息,地图工具包括测距,获取面积,以积打印地图,地图全屏,实时路况,坐标是否在polygon区域内,
打车方案,经过中间途经点,添加地图控件;

界面查看 : http://www.cnblogs.com/editor/p/4080517.html

相关新增代码

1. defaults 代码块:

ZMap.defaults = {
    city : ‘泉州‘,
    level: 12
};

地图初始化时,如果未设置相关地理坐标时,默认显示位置及级别;

2. 事件 块代码:

ZMap.addListener = function(obj,type,callback) {
    ZMap.events.add(‘Main‘, obj, type, callback);
};

/**
 * 1. add => key: method_objName[x]
 * eg: GuiJiPlay_polyline
 * 2. ZMap.mapObj => key: Main
 * 3. caches => key : method_objName[x]_type || Main_type
 */
ZMap.events = {
    caches : {},
    add : function(key,obj,type,callback) {
        obj.addEventListener(type, callback);
        this.caches[key+‘_‘+type] = {‘obj‘:obj, ‘type‘:type, ‘callback‘:callback};
    },
    remove : function(key, type) {
        this.removeByKey(key+‘_‘+type);
    },
    removeByKey : function(keytype) {
        if (this.caches[key]) {
            var json = this.caches[keytype];
            json[‘obj‘] && json[‘obj‘].removeEventListener(json[‘type‘], json[‘callback‘]);

            delete this.caches[key];
        }
    },
    clear : function () {
        for (keytype in this.caches) {
            this.removeByKey(keytype);
        }

        this.caches = {};
    }
};

ZMap.addListener 现在只用于 ZMap.mapObj 地图的事件添加操作;

ZMap.events 可以用于所有对象的事件操作,添加,删除,清除所有事件;

ZMap.evetns 说明

1. caches 为 json 格式 对象;用于缓存 添加事件,格式为:

{
      ‘Main_click‘: {‘obj‘:map, type‘click‘, ‘callback‘:callback},
      ‘GuiJiPlay_polyline_click‘:{‘obj‘:polyline, type‘click‘, ‘callback‘:callback}
}

key 为 add 方法中的 key + ‘_‘ + 事件类型 type;

2. add方法参数说明:

1>. key: 如果是 ZMap.mapObj 则 key 为 Main; 如果为其他,则自定义,一般为 当前: ‘功能方法_对象名称‘, 比如 ‘GuiJiPlay_polyline‘;

2>. obj 为 要添加事件的对象,所有地图对象都可以添加 事件;

3>. type 为事件类型:click, dblclick, dragend 等

4>. callback 为回调方法;

3.  remove 方法,key 跟 add 方法参数 key 一样; type 为事件类型;

4. clear 方法,清除地图及相关控件,Overlay 等设置的所有事件;

使用方法

var polyline = ZMap.addPolyline(points);

//添加事件
ZMap.events.add(‘Test_polyline‘, polyline, ‘click‘, function(e) {
    alert(‘测试事件添加‘);
});

//删除事件
ZMap.events.remove(‘Test_polyline‘, ‘click‘);
//或
ZMap.events.removeByKey(‘Test_polyline_click‘);

//清空所有事件
ZMap.events.clear();

源码下载

源码下载:http://files.cnblogs.com/editor/baiduMap3.rar

本项目源码采用 SpringMvc+Maven搭建,src/main/webapps 下即是 脚本源码;

时间: 2024-08-29 05:29:21

百度地图 api 功能封装类 (ZMap.js) 新增管理事件功能 [源码下载]的相关文章

百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]

相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地图工具包括测距,获取面积,以积打印地图,地图全屏,实时路况,坐标是否在polygon区域内,打车方案,经过中间途经点,添加地图控件: 界面预览 本界面项目由:

【百度地图API】情人节求爱大作战——添加标注功能

原文:[百度地图API]情人节求爱大作战--添加标注功能 任务描述: 2月2日是除夕,2月14立马来!即将到来的情人节,你想送TA一份什么礼物呢? 不如,在你们居住的地方,画个大大的桃心,表达你对TA的爱意吧! 如何实现: 给地图增加一个事件监听,addEventListener: 当鼠标点击地图时,首先获取改点坐标,其次在改点坐标处增加一个红色标注. 图示: 运行代码,请点击这里. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr

百度地图api入门介绍(js篇)

最近因为用到了百度地图的api,感觉还有点用记录一下,一方面充实一下自己,第二也希望有用到的同学可以参考一下:因为之前用过android baidu api  所以再用web  的感觉要比android  简单很多: 步骤: 1.申请秘钥   不多说,自己申请就好了: 2.引入百度地图,设置秘钥 3.编写  百度地图js  类   并且引入 3.这是我写的一个小demo  哈   位置是手机传递过来的具体位置 具体显示如下 最简单的demo  搭建完成  :     百度地图api  有详细步骤

【百度地图API】如何给自定义覆盖物添加事件

http://www.cnblogs.com/milkmap/archive/2011/10/20/2219149.html 摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~ ----------------------------------------------------------------------------------------- 一.定义构造

C#请求百度地图API 查询经纬度 摆脱js

public class BaiduPosition { public int status { get; set; } public Result result { get; set; } } public class Result { public Location location { get; set; } public int precise { get; set; } public int confidence { get; set; } public string level {

[百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码

MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地图工具包括测距,获取面积,以积打印地图,地图全屏,实时路况,坐标是否在polygon区域内,打车方案,经过中间途经点,添加地图控件: 界面查看 : http://www.cnblogs.com/ed

百度地图API和高德地图API资料集锦

[高德地图API]从零开始学高德JS API(五)路线规划--驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 [高德地图API]从零开始学高德JS API(三)覆盖物--标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 [高德地图API]从零开始学高德JS API(二)地图控件与插件--测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 [高德地图API]从零开始学高德JS API

百度地图API的自动定位和搜索功能(移动端)

近期有个项目涉及到百度地图API,要求做到自动定位和搜索功能.煞费苦心的研究半天,终于能将两个功能合二为一,现将代码贴出来分享给大家,希望你们的砖搬得又快又好.注释不多,具体请参照:http://lbsyun.baidu.com/index.php?title=jspopular 注意:这段代码最好能上传到新浪云等免费空间,用手机打开连接即可看到效果,不然看不到看不到看不到哦. <!DOCTYPE html><html><head> <meta http-equi

百度地图API功能给多个点添加信息窗口

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type