Как передать объекты карты Google членам в пространстве имен jQuery? - PullRequest
Новая
       22

Как передать объекты карты Google членам в пространстве имен jQuery?

1 голос
/ 09 декабря 2010

Я раскручиваю свои шины, когда начинаю создавать плагин jQuery для Google Maps v3.Я прочитал: «Шаблон разработки плагинов» , Плагины / авторинг и просмотрел несколько плагинов для v2, но я застрял в том, как правильно инициализировать карту,чтобы я мог достичь этих трех целей:

  1. Создавать новую карту можно только в том случае, если ее нет в выбранном элементе.
  2. Разрешить сцепление на любой существующей карте.
  3. Иметь методы, вызываемые на объекте (например, $.gmap.method() вместо $.gmap('method')).

Извините, если это плохо сформулировано, но в основном я хочу обертку вокруг объекта Map, чтобы я мог гораздо быстрее создавать Google Карты с подобными данными.

Вотчто у меня так далеко: 


(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() и не создавать новый экземпляр, тогда я смогу поработать с остальными.

PS, если кто-нибудь уже написал плагин, подобный этому, указывая, что было бы еще лучше.

PSS Я уже заказал Руководство для начинающих по разработке плагинов jQuery , но я действительно предпочел бы начать работу с ним до его доставки.Другие рекомендуемые материалы приветствуются.

Спасибо за любую помощь.

1 Ответ

0 голосов
/ 10 декабря 2010

Я наконец понял это.По сути, следующее делает именно то, что я искал: 

(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);

Надеюсь, это кому-нибудь поможет.

...