javascript - 要访问 Google maps api，我什么时候需要使用以下脚本？

Question

<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>

and

<script async defer  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">   </script>

n the above scripts, the difference is API key. I have noticed code samples working with and without API KEY. It says Google Maps Javascript API 2 requires API key and Google Maps Javascript API 3 doesn't require the key. But in the scripts we are not mentioning which version of API it should access. So what makes the difference?

Answer 1

此脚本加载 experimental version没有 API key 的 Google Maps Javascript API:

<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>

此脚本使用 API key 异步加载 Google Maps Javascript API 的实验版本:

<script async defer  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">   </script>

• API key 允许跟踪使用情况，并允许您在需要时购买额外的配额。

对于async defer和callback参数，来自这个问题的答案:Page speed - any problems with simply using defer attribute?

async: You can prevent a script from blocking during load by using the async attribute on modern browsers

defer: The defer attribute indicates not to load at all until the page DOM has completely loaded. Defer implies async.

With the Google Maps API, you must use a callback parameter when loading the API asynchronously. This causes the api to use dynamic script insertion rather than document.write calls internally. You can specify an empty callback parameter as well.