谷歌地圖 API 開發之新建地圖

時間 2019-11-16

標籤谷歌地圖 api 開發新建欄目 Chrome 简体版

原文原文鏈接

最近項目用到谷歌地圖，可是看谷歌api文檔，對於國人來講，仍是比較吃力的，網上找資料也並無太多的資料，因此就想分享給你們。可是由於本人太懶了，每次研究技術完事時間一久就忘了，更別提分享了，在朋友的鼓勵支持之下，從新開始寫博客，共享給你們，若是有不到位或者錯誤的地方還但願你們多多指教。畢竟交流纔會進步(^o^)/~ javascript

好了，廢話很少說開始正題。css

谷歌地圖官網：https://developers.google.com...
入門指南：https://developers.google.com...html

好了，下面就貼一段簡單的案例代碼，入門指南里的java

<!DOCTYPE html>
    <html>
      <head>
        <style type="text/css">
          html, body { height: 100%; margin: 0; padding: 0; }
          #map { height: 100%; }
        </style>
      </head>
      <body>
        <div id="map"></div>
        <script type="text/javascript">
            var map;
            function initMap() {
              map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8
              });
            }
        </script>
        <script async defer
          src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&callback=initMap"></script>
      </body>    
    </html>

引入的js裏須要一個祕鑰，如今引用的這個是可用的，若是想本身建立一個能夠去官網裏本身申請建立。segmentfault

下面說下Google 地圖建立注意點：api

1. 必須是用 <!DOCTYPE html> 聲明以 HTML5 形式聲明應用。瀏覽器

大多數瀏覽器使用 "標準模式" 的 HTML5 文檔渲染頁面，這就意味着你的應用是兼容各大瀏覽器的。async

另外，若是沒有DOCTYPE標籤，瀏覽器則使用混雜模式 (quirks mode)進行渲染頁面內容。提示：應該注意的是一些"混雜模式"中的CSS並不能使用與標準模式中。在具體的應用中，全部基於百分比的大小都必須從父塊元素繼承。若是在父模塊中沒有指定大小，默認值爲 0 x 0 像素。若是你想使用百分比，能夠在<style> 標籤中聲明，以下所示：函數

<style type="text/css">
    html {height:100%}
    body {height:100%;margin:0;padding:0}
    #googleMap {height:100%}
</style>

請輸入代碼這個樣式聲明代表地圖模塊的（GoogleMap）應 HTML高度爲100%。ui

2. 添加 Google 地圖 API Key

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

將google生成的 API key 放置於 key 參數中(key=YOUR_API_KEY)。 The sensor 參數是必須的，該參數用於指明應用程序是否使用一個傳感器 (相似 GPS 導航) 來定位用戶的位置。參數值能夠設置爲 true 或者 false。

3. 地圖 DOM 元素

<div id="map"></div>

要想在網頁上顯示地圖，咱們必須爲其預留一個位置。咱們一般的實現方式是：建立一個命名的 div 元素，而後在瀏覽器的文檔對象模型 (DOM) 中獲取對該元素的引用。

4. 建立一個 Map 對象

map = new google.maps.Map(document.getElementById("map"), {...});

表示地圖的 JavaScript 類是 Map 類。該類的對象定義頁面上的單個地圖。（您能夠建立該類的多個實例–每一個對象都將定義頁面上的一個不一樣地圖。）咱們利用 JavaScript new 運算符來新建該類的實例。

當您新建地圖實例時，您須要在頁面中以地圖容器形式指定一個 <div> HTML 元素。HTML 節點是 JavaScript document 對象的子項，咱們經過 document.getElementById() 方法獲取對該元素的引用。

5. 定義地圖屬性

每一個地圖都有兩個必需選項：center 和 zoom。還能夠加上MapTypeId

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

center（中心點）：中心屬性指定了地圖的中心，該中心經過座標（緯度，經度）在地圖上建立一箇中心點。
Zoom（縮放級數）：zoom 屬性指定了地圖的縮放級數。zoom: 0 顯示了整個地球地圖的徹底縮放。
MapTypeId（地圖的初始類型）：mapTypeId 屬性指定了地圖的初始類型。mapTypeId包括以下四種類型：
- google.maps.MapTypeId.HYBRID：顯示衛星圖像的主要街道透明層
- google.maps.MapTypeId.ROADMAP：顯示普通的街道地圖
- google.maps.MapTypeId.SATELLITE：顯示衛星圖像
- google.maps.MapTypeId.TERRAIN：顯示帶有天然特徵（如地形和植被）的地圖

好了，上述基本都是從官網上貼來整理的，至此應該都能正常建立地圖了。

新手注意：

可是問題來了，由於當時作項目，項目比較大，並且時間很緊，有個細節當時沒注意，就是在寫js的過程當中，函數命名必需要要有 initMap()，否則會報錯，提示 Uncaught InvalidValueError: initMap is not a function.

項目中有的地圖是須要點擊彈出地圖層的，點擊事件纔要執行方法，然而每次都是自動執行，提示各類問題。百度谷歌了很久，答案紛飛，仍然毫無頭緒，而後又耐心從頭操做了一遍，看文檔，對，當看到引入的js的時候，裏面有個&callback=initMap ，臥槽，大罵一句，放到這麼不起眼的地方，這不坑人麼。這句話應該刪除的。