谷歌服務：Google Maps JavaScript API

wmaker發表於2018-05-07
谷歌GoJavaScriptAPI

使用前準備

能訪問外網，有Google賬戶。

進入開發者控制檯

谷歌開發者控制檯

開發者控制檯

建立專案

初次需要建立一個專案，作為使用的依託。
我們建立名為test的專案，進入後再選擇API和服務模組。

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

相關文章