1

およびgoogle.mapsに準拠した AMD モジュールとして初期化するには、次を使用します。twitter/flightrequirejs

define([
    'components/flight/lib/component',
    'async!http://maps.google.com/maps/api/js?key=AIzaSyDp9D9Db1CWfeGUJ1bin45s2WKZN5sapuM&sensor=false'
], function(defineComponent){

return defineComponent(newMap);

function newMap () {

    this.defaultAttrs({
        // Selector
        mapDiv:         '#map',
        // Map Canvas
        mapCanvas:      {},
        // Initialized?
        initializedMap: false
    });

    this.initializeMap = function () {
    var mapCenter = new google.maps.LatLng(39.960664,-75.605488);

    var mapOptions = {
          zoom: 15,
          center: mapCenter,
          disableDefaultUI: true,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
        };

    this.attr.mapCanvas = new google.maps.Map(document.getElementById("map"), mapOptions);

    if (this.attr.mapCanvas != {} ) {
        this.attr.initializedMap = true;
        this.trigger(document, 'mapInitialized', {
            status: this.attr.initializedMap
        });
    };

    // ### Map events
  //-----------

    // Mouse Up
    google.maps.event.addListener(this.attr.mapCanvas, 'mouseup', function() {
      this.trigger('mouseup');
    });

    // Zoom Changed
    google.maps.event.addListener(this.attr.mapCanvas, 'zoom_changed', function() {
        this.trigger('zoomChanged');
    });

};

this.mouseup = function () {
    console.log("what");
}

this.zoomChanged = function () {
    console.log("is up");
}

  this.after('initialize', function () {
    this.on('mouseup', this.mouseup);
    this.on('zoomChanged', this.zoomChanged);
    this.on('initializeMap', this.initializeMap);

    this.trigger('initializeMap');
  });
}
});
4

1 に答える 1

1

非同期に加えていくつかの機能を追加するGoogle マップ AMD ローダー プラグインをまとめました。ローダ。

require.config({
  googlemaps: {
    params: {
      key: 'abcd1234',        // sets api key
      libraries: 'geometry'   // set google libraries
    }
  }
});
require(['googlemaps!'], function(gmaps) {
  // google.maps available as gmaps
  var map = new gmaps.Map('map-canvas');
});
于 2014-01-16T21:45:38.450 に答える