jQuery 네임 스페이스의 멤버에게 Google지도 객체를 전달하려면 어떻게해야합니까?

Question

Google Maps v3 용 jQuery 플러그인을 빌드하는 동안 타이어를 돌리고 있습니다. , "A Plugin Development Pattern"Plugins/Authoring을, 및 v2를위한 플러그인의 숫자를 통해 보았다,하지만 난이 세 가지 목표를 충족 할 수 있도록 제대로지도를 초기화하는 방법에 붙어 있어요 : 나는 통해 읽고

1. 만 새로 만들기를 선택한 요소에 요소가없는 경우 매핑합니다.
2. 기존지도에서 연결 허용.
3. 개체에 대해 호출 할 수있는 메서드가 있어야합니다 (예 : $.gmap('method') 대신 $.gmap.method()). 내가 훨씬 더 빨리 유사한 데이터와 Google지도를 구축 할 수 있도록

이 제대로 표현한 경우 죄송하지만, 기본적으로 나는 Map 객체의 래퍼를 원한다. 여기

내가 지금까지있어 무엇 :

(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. 누군가가 이미 이와 같은 플러그인을 작성했다면, 더 나아질 것이라고 지적하십시오.

P.S. 이미 jQuery 플러그인 개발 초보자 용 안내서을 주문했지만 배달되기 전에 실제로 시작하려고합니다. 다른 제안 된 독서가 환영받는 것 이상입니다.

도움 주셔서 감사합니다.

Answer 1

나는 이것을 알아 냈습니다. 다른 센터를 설정 $('.map_containers').gmap().css({border: '1px solid orange'}); //css to demonstrate chaining.

다음 DOM에

넣어지도 (들) :

이

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

그때 그래서 같은 방법을 사용 : 기본적으로, 다음은 내가 찾던 정확히 수행합니다 $('.map_containers').gmap().go(50,50);

희망이 있으면 도움이 될 것입니다.