Cách tải API Google Maps với RequireJS?

Question

Tôi đang đấu tranh để tải gmaps api với requireJS. Đây là những gì tôi đã cố gắng:.

requirejs.config({ 
    urlArgs: "noCache=" + (new Date).getTime(), 
    paths : { 
     "jquery": "vendor/jquery-1.8.2.min", 
     "bootstrap": "vendor/bootstrap.min",  
     "underscore": "libs/underscore-min", 
     "backbone": "libs/backbone-min",  
     "template": "libs/template", 
     "gmaps": "http://maps.google.com/maps/api/js?v=3&sensor=false" 
    }, 
    shim: { 
     'backbone': { 
      deps: ['jquery', 'underscore'], 
      exports: 'Backbone' 
     }, 
     'underscore': { 
      exports: '_' 
     }, 
     'bootstrap': { 
      deps: ['jquery'] 
     }, 
     'gmaps': { 
      deps: ['jquery'] 
     }, 
     'main':{ 
      deps: ['jquery','gmaps'] 
     } 
    } 
}); 

require(["main"], function (main) {}) 

Nhưng bên main.js khi tôi cố gắng để nhanh chóng geocoder tôi đã nhận ,, không xác định không phải là một" lỗi chức năng

var geocoder = new google.maps.Geocoder(); 

Bất cứ ý tưởng gì có thể tôi được làm sai

Answer 1

tôi đã quản lý để sắp xếp nó ra với các plugin async

Một ví dụ nhanh chóng là:?.

require.config({ 
    paths: { 
     'async': 'lib/requirejs-plugins/src/async' 
    } 
}); 

define(['async!http://maps.google.com/maps/api/js?sensor=false'], function() { 
    // Google Maps API and all its dependencies will be loaded here. 
}); 

Answer 2

Tiếp theo từ hjuster đây là một ví dụ nhanh về cách sử dụng các async Plugin

https://gist.github.com/millermedeiros/882682

Answer 3

Ngoài ra còn có goog plugin (đòi hỏi async và propertyParser), có sẵn trên github

Cách sử dụng ví dụ cho bản đồ google:

require(["goog!maps,3,other_params:sensor=false"], function(){}); 

Answer 4

Nhờ user1706254 gây ra tài liệu chính thức: https://github.com/millermedeiros/requirejs-plugins/ đã sử dụng từ khóa 'define' không hoạt động cho tôi nhưng 'require' đang hoạt động tốt.

Tôi không thể tải trực tiếp:

require(["goog!maps,3,other_params:sensor=false"], function(){}); 

Nhưng bằng cách không đồng bộ đã làm các trick:

require(['async!http://maps.google.com/maps/api/js?sensor=false'], function(){}); 

Answer 5

@ câu trả lời hjuster đã dẫn đường cho tôi và tôi đã giải quyết bằng cách gọi lại chức năng.

define(['async!http://maps.google.com/maps/api/js?key=YOURKEY!callback'], 
    function (_ExpectedMap) { 
           callback(); 
          }); 

Thông báo các ! Callback vào cuối url bắt đầu với async!, phương thức gọi lại đang được gọi khi hoạt động tải được thực hiện.

function callback() 
{ 
    //Now load google maps API dependant libraries 
    require(['gmapsLib'], function (googlemaps) { 
        window.GMaps = googlemaps; 
        } 
} 

Có một question tôi thời gian gần đây nhận thấy, một chức năng (onLoad) được sử dụng thay vì gọi lại để ngăn chặn từ lỗi timeout. Hấp dẫn.

Answer 6

Không thể làm cho các plugin hoạt động đối với một số lý do, nhưng cách giải quyết này lưu ngày của tôi:

require(['https://apis.google.com/js/client.js?onload=doNothing'], function() { 
    // Poll until gapi is ready 
    function checkGAPI() { 
     if (gapi && gapi.client) { 
     self.init(); 
     } else { 
     setTimeout(checkGAPI, 100); 
     } 
    } 

    checkGAPI(); 
    }); 
}); 

Chỉ cần kiểm tra nếu gapi sẵn sàng mỗi 100 millisec, cho đến khi nó cuối cùng tải.

Tìm thấy đoạn code trong bài viết này http://dailyjs.com/2012/12/06/backbone-tutorial-2/

Tôi đoán bạn cũng có thể thử nó với

if (google && google.maps && google.maps.Geocoder) { 
    // now google.maps.Geocoder is gonna be defined for sure :) 
} 

Answer 7

Bạn không cần plugin async để sử dụng Google Maps với require.js. Mục tiêu có thể đạt được chỉ sử dụng một shim cấu hình đơn giản:

require.config({ 
 
    paths: { 
 
     gmaps: '//maps.googleapis.com/maps/api/js?' // question mark is appended to prevent require.js from adding a .js suffix 
 
    }, 
 
    shim: { 
 
     gmaps: { 
 
      exports: 'google.maps' 
 
     } 
 
    } 
 
}); 
 

 
require(['gmaps'], function (gmaps) { 
 
    var center = {lat: -34.397, lng: 150.644}; 
 
    var map = new gmaps.Map(document.getElementById('map'), { 
 
     center: center, 
 
     zoom: 8 
 
    }); 
 
    new gmaps.Marker({ 
 
     map: map, 
 
     position: center 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script> 
 

 
<div id="map" style="width: 100%; height: 200px"></div>