谷歌服務：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 }
      });
    });
  }
};