Google Maps 鼠标右键菜插件

最近犹豫刚开始学习Google Maps API v3,学习它的主要目的就是因为公司的需求,既然要用到地图,鼠标右键弹出菜单,对应的菜单完成标记的添加,删除,获取标记坐标的功能肯定是比不可少的.这些东西都是建立在鼠标右键菜单上来实现的.因此鼠标右键功能是必不可少的,之前的帖子Google Maps 鼠标右键菜单简易效果中根据园子中的帖子进行了简单的重构,在重构中学习,发现其BUG甚多,作为应用犹如鸡肋,国内的相关资料少只有少,我没有找到多少除其之外的任何一篇有建设性的文章,由于公司时间的原因,自己重写一个功能时间紧迫,而且浏览器的兼容性更人让人头疼.因此唯一能够求助的只有老外那些牛人了,查了半天在Google通过关键字"Google Maps Right Click Menu"找到了相关的资料.暂时发现2个插件很不错,可以省去自己很多的时间.毕竟本人JavaScript与那些老外比起来,那只属于一个初学者的级别而已.因此拿来主义对于国人而言,那是再合适不过的方法了.真不知道那些老外死绝了我们还靠什么吃饭.估计真的得下岗了.要么就是在毫无创新的基础上反反复复的去做重复劳动.作为一个有良知的程序员,有几个人愿意这样了此一生呢?

下边陈列出我找到的3个插件:

1、原帖标题为:Open a menu when rightclick(单击鼠标右键打开一个菜单)

我个人比较倾向于这个插件，因其不是jQuery的插件，所以不需要引用的庞大的jQuery类库.不过功能上的局限性就比较大了，需要自己进行扩充。

以下是对应的示例展示和文档说明

http://code.martinpearman.co.uk/googlemapsapi/contextmenu/1.0/examples/

http://code.martinpearman.co.uk/googlemapsapi/contextmenu/1.0/docs/

下边列出Google Maps 鼠标右键的CSS代码，其他代码请参照官方examples。在本文中就不在累赘的贴出了。

<style type="text/css">
        html
        {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        /*    start styles for the ContextMenu    */
        .context_menu
        {
            background: none repeat scroll 0 0 #FFFFFF;
            border: 1px solid #CCCCCC;
            padding: 0 0 6px;
            position: absolute;
            white-space: nowrap;
            z-index: 1000;
        }
        .context_menu_item
        {
            color: #333333;
            display: block;
            font-weight: normal;
            padding: 6px 44px 6px 16px;
        }
        .context_menu_item:hover
        {
            background-color: #F1F1F1;
        }
        .context_menu_separator
        {
            background-color: #EBEBEB;
            height: 1px;
            margin: 0;
            padding: 0;
        }
        #clearDirectionsItem, #getDirectionsItem
        {
            display: none;
        }
        /*    end styles for the ContextMenu    */
        
        #map_container
        {
            height: 100%;
        }
    </style>

 

2、jQuery contextMenu Plugin(jQuery内容菜单插件)下载

从名称上就可以看出其的应用不只是鼠标右键弹出菜单而已。从字面上看就知道其能称之为插件，故有其优于一般定制代码的好处以及扩展性。

 

3、gmap3

官方给出的定义为:

A JQuery plugin to create google maps with advanced features (overlays, clusters, callbacks, events...)

翻译如下:

一个JQuery插件用于创建进阶功能的google地图。包含扩展，clusters(这个单词很少遇到,真不知道“集群”是个什么概念)，回调函数，事件等。。。

使用Google Maps这3个插件对于提高开发效率以及浏览器的兼容性，肯定是必备的开发利器，具体的基础用法在这里我就不在阐明，有兴趣的大家可以去官方查阅，不过在使用时遇到的问题，以及好的使用Demo我会在今后的工作中慢慢贴出。

电脑维修网