谷歌服务：Google Maps JavaScript API

使用前准备

能访问外网，有Google账户。

进入开发者控制台

谷歌开发者控制台

创建项目

初次需要创建一个项目，作为使用的依托。
我们创建名为test的项目，进入后再选择API和服务模块。

启用相应API

点击左侧库模块，进入API选择页面，找到Google Maps JavaScript API点击并启用。

创建密钥

点击左侧密钥模块，创建一个API密钥。
密钥是使用API的必须的标识符，可以多地多方使用。
密钥一般有某些配额，比如访问次数、每次访问的流量等等。
密钥可以自定义某些限制，比如使用此密钥的网站只能是某某域名下的等等。

开始使用

Map JS API 官方使用介绍与 Map JS API 官方API文档
每一门框架，都有自己的编写思想和使用规则，而这些东西与其它框架很多时候是互通可类比的。
所以，我们要使用之前的经验来类比学习新的框架，并在查看官方文档，API结构时细细感受此框架的规则。
JS Map API有中文文档，而且内容详细通俗易懂，所以在这里不再作介绍。但今后会就某些需要注意的地方持续更新。

注意
下面代码中的key是本人真实的密钥，仅仅为了方便共同学习使用。
毕竟初次直接的成功运行，不仅能保持和提高探究的热情，更能节约一大笔无谓的时间花销。
不过因为有配额限制，希望大家温柔的对待。

在普通页面中使用





  
  Document

在前端框架中使用

以vue.js为例。
这里使用了最原始的 google-maps 包，可以使用npm直接安装。

Google的很多服务不是静态的Library(可以与JQ对比)。
每次将不同的配置通过API发送给Google，它再返回我们需要的东西(代码图片等等)。
也即是说，初次使用时，都要发送请求接收到相应对象后，我们再使用它以执行相应的操作。
这也意味着我们安装的依赖包，里面不是其源代码，而是帮助我们在框架的环境下请求其源代码的代码。

import GoogleMapsLoader from 'google-maps';

export default {
  name: 'google-map',
  mounted() {
    GoogleMapsLoader.KEY = 'AIzaSyBSqv9FMHThX9DU_JK_pbwxzBQushtGfv4';

    GoogleMapsLoader.load((google) => {
      let map = new google.maps.Map(document.getElementById('map'), {
        zoom: 3,
        center: { lat: 34, lng: 106 }
      });
    });
  }
};