谷歌服务：Google Maps JavaScript API

时间 2019-11-15

标签谷歌服务 google maps javascript api 栏目 Chrome 繁體版

原文原文链接

使用前准备

能访问外网，有Google帐户。javascript

进入开发者控制台

谷歌开发者控制台html

建立项目

初次须要建立一个项目，做为使用的依托。
咱们建立名为test的项目，进入后再选择API和服务模块。前端

启用相应API

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

建立密钥

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

开始使用

Map JS API 官方使用介绍与 Map JS API 官方API文档
每一门框架，都有本身的编写思想和使用规则，而这些东西与其它框架不少时候是互通可类比的。
因此，咱们要使用以前的经验来类比学习新的框架，并在查看官方文档，API结构时细细感觉此框架的规则。
JS Map API有中文文档，并且内容详细通俗易懂，因此在这里再也不做介绍。但从此会就某些须要注意的地方持续更新。npm

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

在普通页面中使用

<!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直接安装。api

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 }
      });
    });
  }
};