はURLからAPIをインポートする代わりに<head>

-1

で多くのWeb APIはヘッドにスクリプトタグを追加することで使用することができます。はURLからAPIをインポートする代わりに<head>

<html lang="en"> 
<head> 
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script> 
</head> 
<body> 
    <div id="root" style="height: 100%"></div> 
</body> 
</html>

しかしES6のように反応し、新しい機能などのLIBSを使用している場合、これは場違いと思われます。物をモジュラーに保つために、インポートはそれを使用するコードに近いものにする必要があります。

私たちはどうやって同じことをすることができますが、ES6ファイルではできますか？

私はこのようにそれを取り出すことを考えていました：

var request = require('request'); 
request('https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places', function (error, response, body) { 
    if (!error && response.statusCode == 200) { 
    ... 
    } 
})

返されているものを使って何をすべきか？それを頭に付け加える？

更新：

エラー：私は間違っている時にスクリプトを読み込むReferenceError: google is not defined

アム？

const loadScript = (src) => { 
    const script = document.createElement("script") 
    script.type = "text/javascript" 
    script.src = src 
    document.getElementsByTagName("head")[0].appendChild(script) 
} 


class Geosuggest extends React.Component { 

    constructor(props) { 
    super(props) 
    loadScript('https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places') 
    } 

    componentWillMount() { 
    this.autocompleteService = new google.maps.places.AutocompleteService(); 
    } 

}

出典

2016-06-15 BAR

あなたはまったく同じやり方で、ES6はスクリプトがHTMLで追加される方法を変更しません。 – adeneo

私はJSでそれをすべて意味します。 – BAR

ええと、あなたはJSでスクリプトタグを挿入しますか？クライアント側のJSとのクロスオリジンリソースを取得することはできませんし、サーバー側でそれを取得することに多くのポイントがないようですか？あなたは 'require'を使っているようです。これはRequire.jsの黙示を意味しますか？ – adeneo

http://jsfiddle.net/doktormolle/7cu2f/

HTML：

<div id="map_canvas" style="height:200px"></div>

のjavascript：救助へ

function loadScript(src, callback) { 

    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    if (callback) script.onload = callback; 
    document.getElementsByTagName("head")[0].appendChild(script); 
    script.src = src; 
} 


loadScript('http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize', 
    function() { 
    log('google-loader has been loaded, but not the maps-API '); 
    }); 


function initialize() { 

    log('maps-API has been loaded, ready to use'); 
    var mapOptions = { 
    zoom: 8, 
    center: new google.maps.LatLng(-34.397, 150.644), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map_canvas'), 
    mapOptions); 
} 

function log(str) { 
    document.getElementsByTagName('pre')[0].appendChild(document.createTextNode('[' + new Date().getTime() + ']\n' + str + '\n\n')); 
}

出典

2016-06-15 18:30:44

react-helmet！

class Geosuggest extends React.Component { 
    componentWillMount() { 
    this.autocompleteService = new google.maps.places.AutocompleteService(); 
    } 
} 

const wrap =() => <div> 
    <Helmet script={[{"src": GoogleMapsApiUrl}]}/> 
    <Geosuggest /> 
</div> 

export default wrap

出典

2016-06-15 19:57:35 BAR

はURLからAPIをインポートする代わりに<head>

答えて

関連する問題