谷歌服务：Google Maps JavaScript API
mislyvinky 2019-06-27
使用前准备
能访问外网，有Google账户。
进入开发者控制台
创建项目
初次需要创建一个项目，作为使用的依托。
我们创建名为test的项目，进入后再选择API和服务模块。
启用相应API
点击左侧库模块，进入API选择页面，找到Google Maps JavaScript API点击并启用。
创建密钥
点击左侧密钥模块，创建一个API密钥。
密钥是使用API的必须的标识符，可以多地多方使用。
密钥一般有某些配额，比如访问次数、每次访问的流量等等。
密钥可以自定义某些限制，比如使用此密钥的网站只能是某某域名下的等等。
开始使用
Map JS API 官方使用介绍 与 Map JS API 官方API文档
每一门框架，都有自己的编写思想和使用规则，而这些东西与其它框架很多时候是互通可类比的。
所以，我们要使用之前的经验来类比学习新的框架，并在查看官方文档，API结构时细细感受此框架的规则。 JS Map API有中文文档，而且内容详细通俗易懂，所以在这里不再作介绍。但今后会就某些需要注意的地方持续更新。
注意
下面代码中的key是本人真实的密钥，仅仅为了方便共同学习使用。
毕竟初次直接的成功运行，不仅能保持和提高探究的热情，更能节约一大笔无谓的时间花销。
不过因为有配额限制，希望大家温柔的对待。
在普通页面中使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
<div id="map"></div>
<script>
"use strict";
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: { lat: 34, lng: 106 },
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBSqv9FMHThX9DU_JK_pbwxzBQushtGfv4&callback=initMap" async defer></script>
</body>
</html>在前端框架中使用
以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 }
});
});
}
}; 
