jQuery 地区选择插件的使用

红薯 发布于 2010/03/24 15:29
阅读 11K+
收藏 3

介绍

用户的地址选择往往是网络应用中不可缺少的一部分,可是遇到了以下问题:

  • 地址数据难以收集
  • 用户选择烦琐,需要手动查找冗长的下拉菜单
  • 难以维护地理数据以及重用组件

LocationSelect插件具有以下特点,有效的解决了以上三个问题:

  • 基于广泛使用的jQuery插件库,轻易实现组件重用
  • 地理数据整理来自国家公布数据
  • 自动判断用户地理位置并进行最大努力的自动选择
  • 独立的json数据源,可以方便的进行维护

演示

一个在线演示可以在http://pagetalks.com/share/LocationSelect找 到。
该演示实现了一个自动探测用户地理位置并自行选择的标准案例。

下载

  LocationSelect.zip (28.2 KiB, 26 hits)

安装

  1. 引入jQuery脚本库,目前脚本仅在1.4.2的jQuery中进行过调试,推荐大家使用。同时,还可以使用Google的CDN进行加速:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  2. 引入地理查询引擎(可选)- 本脚本是使用Google Map API V2以及MAXMIND的Javascript API进行联合查询实现确定用户地理信息的。随着Google Map的反向地址解析更为强大后,脚本会考虑减少外部脚本的依赖性。目前如果您需要使用自动检测功能,您必须引入这两个脚本:
    <script src="http://j.maxmind.com/app/geoip.js" type="text/javascript"></script>
    <script src="http://maps.google.com/maps?file=api&v=2&key=XXXXXXX_YOUR_API_KEY_XXXX&sensor=false" type="text/javascript">
  3. 引入LocationSelect的脚本文件 –
    <script type="text/javascript" src="location.js"></script>
  4. 在DOM Ready事件后调用,LocationSelect需要提供一个DOM容器来进行构造,通常您应该传递它一个DIV元素:
    	$(function() {
    $("#loc").LocationSelect();
    });

参数

data (String)
默认: “areas.json” – json数据文件的地址,相对于当前页面
autoDetect : (Boolean)
默认: false – 是否自动检测用户地址并进行选择

常见问题

代码怎么这么乱?
该插件在一开始是另一个项目的一个组件,但并不是jQuery插件,在转换为jQuery插件的过程中造成了很多难看的地方;在下一个版本中会进 行更大改进
Google Map API 不是已经支持反向地址解析了么,为什么还要用MAXMIND的API?
的确是有这个功能了,但对中国用户,基本无法检测正确
为什么不用Google Map API V3
我在开发的时候还没出来V3;另外该插件对Google Map的性能依赖也不大;而且,V3有待磨合
加载中
0
叶落花开
叶落花开
我测试了一下,发现在IE7和chrome中无法正常运行,只有Firefox可以....这也太悲催了吧
0
潘大森
这里有插件,Jquery全国城市插件


http://www.byland-t.com/SoftList.aspx?oid=3
返回顶部
顶部