谷歌服务:Google Maps JavaScript API

使用前准备

能访问外网,有Google账户。

进入开发者控制台

谷歌开发者控制台

谷歌服务:Google Maps JavaScript API

创建项目

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

谷歌服务:Google Maps JavaScript API

启用相应API

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

谷歌服务:Google Maps JavaScript API

创建密钥

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

谷歌服务:Google Maps JavaScript 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 }
      });
    });
  }
};

相关推荐