javascript 如何使用 google-maps-api-v3 而不在 html 上添加脚本标签

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/28490425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 09:03:49  来源:igfitidea点击:

How to use google-maps-api-v3 without add script tag on html

javascriptgoogle-maps-api-3gulpfrontendbower

提问by user614778

i've automated my fronted development , using bower , gulp and browserify . I'm using a lib called Gmapsto handle api calls to google maps . The problem is that i must add on my html a script tag before import gmaps.

我已经使用 bower 、 gulp 和 browserify 自动化了我的前端开发。我正在使用一个名为Gmaps的库来处理对 google maps 的 api 调用。问题是我必须在导入 gmaps 之前在我的 html 上添加一个脚本标签。

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>  

I tried ,without luck, to download the js code from the script link and concat to my other js files , hoping to create an all.min.js and avoid the need to have more than one script tag on my site .

我尝试从脚本链接下载 js 代码并连接到我的其他 js 文件,但不幸的是,我希望创建一个 all.min.js 并避免在我的网站上有多个脚本标签的需要。

I could only manage to make this work adding the script tag to html . Is there anyway to use google maps api inside concatenated files ?

我只能设法将脚本标签添加到 html 来完成这项工作。有没有在连接文件中使用谷歌地图api?

回答by Dr.Molle

When you want use the maps-API without additionally <script>-elements in the document the answer is clearly: NoThe maps-API didn't only use the 1 script, it will inject more scripts into the document.

当您想<script>在文档中使用没有额外-elements的 maps-API 时,答案很明显:maps-API 不仅使用 1 脚本,它还会将更多脚本注入文档。

But when the question is related to the number of scripts that you must include "manually", the answer is yes.

但是,当问题与您必须“手动”包含的脚本数量有关时,答案是肯定的。

It's possible to load the maps-API asynchronously with a callback, the workflow would be:

可以使用回调异步加载地图 API,工作流程为:

  1. load the maps-API asynchronously
  2. create a function(the function you've defined as callback in step#1)
  3. Inside the callback:
    1. initialize GMaps
    2. run the instructions that create the map via GMaps
  1. 异步加载地图 API
  2. 创建一个函数(您在步骤#1 中定义为回调的函数)
  3. 回调内部:
    1. 初始化 GMap
    2. 运行通过 GMaps 创建地图的指令


window.addEventListener('load',function(){

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3&callback=initGmaps';
  document.body.appendChild(script);
});


function initGmaps(){
   //paste here the contents of gmaps.js
   //........

   //then use GMaps
   new GMaps({
        div: '#map',
        lat: 0,
        lng: 0,
        zoom:1
       });
}

Demo: http://jsfiddle.net/doktormolle/cr1w32qn/

演示:http: //jsfiddle.net/doktormolle/cr1w32qn/

回答by David John Smith

Although I can't find any specific mention in Google Maps documentation, I don't believe this would be a good idea.

尽管我在 Google 地图文档中找不到任何具体提及,但我认为这不是一个好主意。

The request to the javascript file is not a simple, static lib. If you visit https://maps.google.com/maps/api/js, you see that there is information contained about Google's internal API version to use, so if you concatenated this into your site js you may find that it will stop working if Google change their internal APIs and/or version number.

对 javascript 文件的请求不是一个简单的静态库。如果您访问https://maps.google.com/maps/api/js,您会看到包含有关要使用的 Google 内部 API 版本的信息,因此如果您将其连接到您的站点 js 中,您可能会发现它会停止如果 Google 更改其内部 API 和/或版本号,则工作正常。

The sensor=true param is also important if you are asking for user's geolocation info in the browser, which would be lost if you concat'd the script.

如果您在浏览器中询问用户的地理位置信息,则 sensor=true 参数也很重要,如果您连接脚本,这些信息将会丢失。