Question

我正在开始为Google Maps v3构建一个jQuery插件。我已阅读："A Plugin Development Pattern"，Plugins/Authoring，并查看了v2的一些插件，但我仍然坚持如何正确初始化地图，以便我能够实现这三个目标：

如果所选元素中没有一个，则只创建一个新地图。
允许链接任何现有地图。
让对象上的方法可调用（例如$.gmap.method()而不是$.gmap('method')）。

如果措辞不当，请道歉，但基本上我想要一个围绕Map对象的包装器，以便我可以更快地构建具有类似数据的Google Maps。

这是我到目前为止所得到的：


(function ($) {
    $.fn.gmap = function(options) {
        var opts = $.extend({}, $.fn.gmap.defaults, options);

        return this.each(function(){
            $gmap = new google.maps.Map(this, opts);
            return $gmap;
        });
    };

    $.fn.gmap.go = function(){
        return this.setCenter(new google.maps.LatLng(10,10));
    };

    $.fn.gmap.defaults = {
        zoom: 2,
        center: new google.maps.LatLng(0,0),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

})(jQuery);

$('map_canvas').gmap();

很抱歉，我知道它并不是很远，但基本上如果有人可以通过调用$('map_canvas').gmap().go()或$('map_canvas').gmap.go()来试图调用Map.setCenter()并且没有创建一个新实例，然后我可以完成其余的工作。

P.S。如果有人已经写过这样的插件，指出它会更好。

P.S.S。我已经订购了 jQuery插件开发初学者指南，但我真的很想在它交付之前开始使用它。其他建议的阅读非常受欢迎。

感谢您的帮助。

Answer 1

我终于弄明白了。从本质上讲，以下内容完全符合我的要求：

(function($) {

var methods = {
    init : function( options ) {
        var output;
        this.each(function(){
            var $this = $(this),
            data = $this.data('gmap');

            var settings = {
                center: new google.maps.LatLng(0,0),
                zoom : 2,
                mapType: "terrain",
            };

            if ( ! data ) {
                if ( options ) { 
                    $.extend( settings, options );
                }
                $(this).data('gmap', new google.maps.Map(
                    $this.get(0), 
                    {
                        center: settings.center, 
                        zoom: settings.zoom,
                        mapTypeId: settings.mapType
                    })
                );  
            }
        });
        return this;
    }       
};

$.fn.gmap = function( method ) {

    this.go = function(lat,lng){
        $this = this;
        this.each(function(){
            $(this).data('gmap').setCenter(
                new google.maps.LatLng(lat,lng)
            );
        });
        return $this;
    }


    if ( methods[method] ) {
        return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
        return methods.init.apply( this, arguments );
    } else {
        $.error( 'Method ' +  method + ' does not exist on jQuery.gmap' );
    } 

};})(jQuery);

然后我使用这样的方法：

将地图放入DOM：$('.map_containers').gmap().css({border: '1px solid orange'}); //css to demonstrate chaining.

设置不同的中心：$('.map_containers').gmap().go(50,50);

希望这有助于某人。

如何将google地图对象传递给jQuery命名空间中的成员？

1 个答案: