谷歌服務：Google Maps JavaScript API

since1986 發布于2019-08-22 17:01 / 2012人閱讀

摘要：使用前準備能訪問外網，有賬戶。進入開發者控制臺谷歌開發者控制臺創建項目初次需要創建一個項目，作為使用的依托。我們創建名為的項目，進入后再選擇和服務模塊。密鑰是使用的必須的標識符，可以多地多方使用。的很多服務不是靜態的可以與對比。

使用前準備

能訪問外網，有Google賬戶。

進入開發者控制臺

谷歌開發者控制臺

創建項目

初次需要創建一個項目，作為使用的依托。
我們創建名為test的項目，進入后再選擇API和服務模塊。

啟用相應API

點擊左側庫模塊，進入API選擇頁面，找到Google Maps JavaScript API點擊并啟用。

創建密鑰

點擊左側密鑰模塊，創建一個API密鑰。
密鑰是使用API的必須的標識符，可以多地多方使用。
密鑰一般有某些配額，比如訪問次數、每次訪問的流量等等。
密鑰可以自定義某些限制，比如使用此密鑰的網站只能是某某域名下的等等。

開始使用

Map JS API 官方使用介紹與 Map JS API 官方API文檔
每一門框架，都有自己的編寫思想和使用規則，而這些東西與其它框架很多時候是互通可類比的。
所以，我們要使用之前的經驗來類比學習新的框架，并在查看官方文檔，API結構時細細感受此框架的規則。
JS Map API有中文文檔，而且內容詳細通俗易懂，所以在這里不再作介紹。但今后會就某些需要注意的地方持續更新。

注意
下面代碼中的key是本人真實的密鑰，僅僅為了方便共同學習使用。
畢竟初次直接的成功運行，不僅能保持和提高探究的熱情，更能節約一大筆無謂的時間花銷。
不過因為有配額限制，希望大家溫柔的對待。

在普通頁面中使用





  
  Document

在前端框架中使用

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

云服務器 GPU云服務器 google-maps Google谷歌 google 導航api google圖像識別api

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94775.html

關于谷歌Google Maps JavaScript API 的學習與分享

摘要：最近參與頁面插入谷歌地圖的項目，因此在此分享下我的學習經驗，第一次寫，請多擔待首先，講下項目的需求，在網頁進行點擊產品列表，渲染對應的地圖信息以及對應的詳情信息，并且修改谷歌固有標簽以及點擊標簽出現，展示詳細信息以及對應的產品。最近參與頁面插入谷歌地圖API的項目，因此在此分享下我的學習經驗，第一次寫，請多擔待！首先，講下項目的需求，在網頁進行點擊產品列表，渲染對應的地圖信息以及對...

HackerShell 2019-08-02 15:20 評論0 收藏0
關于谷歌Google Maps JavaScript API 的學習與分享

摘要：最近參與頁面插入谷歌地圖的項目，因此在此分享下我的學習經驗，第一次寫，請多擔待首先，講下項目的需求，在網頁進行點擊產品列表，渲染對應的地圖信息以及對應的詳情信息，并且修改谷歌固有標簽以及點擊標簽出現，展示詳細信息以及對應的產品。最近參與頁面插入谷歌地圖API的項目，因此在此分享下我的學習經驗，第一次寫，請多擔待！首先，講下項目的需求，在網頁進行點擊產品列表，渲染對應的地圖信息以及對...

silenceboy 2019-08-23 18:09 評論0 收藏0
谷歌地圖 API 開發之新建地圖

摘要：最近項目用到谷歌地圖，但是看谷歌文檔，對于國人來說，還是比較吃力的，網上找資料也并沒有太多的資料，所以就想分享給大家。顯示了整個地球地圖的完全縮放。最近項目用到谷歌地圖，但是看谷歌api文檔，對于國人來說，還是比較吃力的，網上找資料也并沒有太多的資料，所以就想分享給大家。但是因為本人太懶了，每次研究技術完事時間一久就忘了，更別提分享了，在朋友的鼓勵支持之下，重新開始寫博客，共享給大家...

Winer 2019-08-22 10:34 評論0 收藏0
谷歌地圖 API 添加形狀

摘要：谷歌地圖形狀官網簡介您可以向地圖添加各種形狀。移除園如需移除地圖中的圓，請調用方法，并傳遞作為其自變量。將形狀設置為可拖動默認情況下，在地圖上繪制的形狀位置固定。最近加班真是累成狗啊，天天10點以后下班。還有其他的事情，總之都是要死要死的感覺，苦逼的程序員。谷歌地圖形狀官網：https://developers.google.com... 簡介您可以向地圖添加各種形狀。形狀是地圖上...

xiaoxiaozi 2019-08-21 14:21 評論0 收藏0