1. 程式人生 > >谷歌地圖API教程及在VUE中的使用

谷歌地圖API教程及在VUE中的使用

目錄
一、獲取金鑰API Key
  1、建立專案
  2、啟用Maps JavaScript API服務
  3、建立API Key
  4、設定結算賬戶
二、標頭檔案中引入api資原始檔
  1、獲取Ip所屬區域
  2、根據地區載入不同的資源
三、Google Maps API基本使用
  1、載入地圖
  2、新增標註點
  3、自定義圖示
  4、資訊視窗
  5、監聽地圖事件

一、獲取金鑰API Key
要使用Google Maps JavaScript API,必須獲得一個可用的API金鑰。
步驟是:建立專案-啟用Maps JavaScript API服務-建立API金鑰-設定結算賬戶

1、用谷歌賬戶登入谷歌雲平臺
https://cloud.google.com/maps-platform/?hl=zh-cn
進入控制檯,如果是第一次登入,系統會直接提示你建立一個新專案,點選建立
  


2、建立完成後選擇已建立的專案,選擇[API和服務]-[庫],選擇[Maps JavaScript API],在開啟的頁面中點選[啟用]
 


3、在導航選單中找到[API和服務]-[憑據],如果導航選單隱藏,點選圖示顯示選單
 


建立API金鑰
 


點選[限制金鑰]


[應用限制]

裡我們對金鑰使用進行限制,只允許特定的地址使用金鑰,這樣可以防止我們的配額洩露或被竊取。
4、正常使用API Key需要開通結算賬戶
[導航選單]-[結算]中關聯結算賬戶,注意需要信用卡驗證身份,支援VISA、運通、JCB、MasterCard,暫不支援銀聯。驗證身份時會先扣除一美元,驗證成功後會返還。
沒有開通結算賬戶,金鑰不能正常使用,會在頁面出現如下覆蓋層
 

 

二、標頭檔案中引入api資原始檔
谷歌地圖API的使用和百度地圖一樣,在head中引入即可,

<script src="http://ditu.google.cn/maps/api/js?&key=yourkey"></script>


官方的方式是這樣的,

<script src="https://maps.googleapis.com/maps/api/js?&key=yourkey"></script>


http://ditu.google.cn,是針對國內使用者的,官方提供的https://maps.googleapis.com,在國內無法訪問。
我自己測試了下,在國外http://ditu.google.cn,也是可以使用的,所以我暫時先都用http://ditu.google.cn,後續發現問題會再更改更新部落格。
另外我發現一個問題,在外網環境下,本地除錯無論哪種方式都載入不出來,上傳到伺服器之後就正常了,把我的情況列出來供大家參考。

最好的方式還是根據使用者的IP歸屬,載入不同的資源。
1、獲取Ip所屬區域
獲取IP及地區資訊,有兩種方式,第一種自己寫程式解析,需要資料庫支援,第二種呼叫第三方api,比較方便易上手。

在vue中,我嘗試了多種方式,直接在index.html的header中引入, sohu提供的第三方api是可以的

<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>


新浪和網易有道的沒有效果,可能需要通過後臺請求,沒有實踐過
http://www.youdao.com/smartresult-xml/search.s
http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js

搜狐api可以同時得到ip和地區,返回的一個引數cname可能是城市可能是國家,還是建議通過搜狐或其他方式獲取ip然後後臺搭程式查詢ip歸屬地,如果是國內就用http://ditu.google.cn,國外就用https://maps.googleapis.com。
 


 
2、實現根據條件載入不同的資源
Vue工程中, index.html檔案,通過sohuAPI獲取ip等資訊存入cookie

    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script type="text/javascript">
      console.log(returnCitySN)
      document.cookie=returnCitySN["cip"]
    </script>


App.vue 

    var x = document.cookie
    console.log(x)
    if ('條件判斷') {
      document.write('<script src="http://ditu.google.cn/maps/api/js? &key=yourkey"><\/script>')
    }
    console.log('cookieget')


三、Google Maps API基本使用
在vue中,index.html引入檔案,地圖頁面GMap.vue頁面上引入google
import google from 'google'
如果vue報錯,根據提示安裝相關模組,可能需要安裝以下兩個
npm install --save google
npm install vue2-google-maps

**************************  2018.12.12更新 ****************************

'Map' of undefined解決方法

1、webpack.base.conf.js的module.exports里加一句
  externals: {
    'google': 'google'
  },
2、安裝依賴包
npm install vue2-google-maps

這兩步做完差不多就可以了,如果還是有問題,換一換執行步驟,可以把安裝包解除安裝重灌

最後注意map容器要有大小(不要設定成100%)否則會不顯示

***************************************************************************
1、載入地圖
首先定義一個地圖容器

<template>
  <div class="mapdiv">
    <div id="allmap"></div>
  </div>
</template>


設定中心點和縮放級別,就可以例項化一張地圖

      this.ptcenter = {
        lat: 38.281616,
        lng: 175.026542
      },
      this.map = new google.maps.Map(document.getElementById('allmap'), {
        center: this.ptcenter,
        zoom: 3
        // mapTypeId: google.maps.MapTypeId.ROADMAP
      })


預設有滑鼠拖動、滑鼠滾輪縮放、雙擊放大(左擊)或縮小(右擊)功能,放大縮小、地圖/衛星圖切換控制元件。
mapTypeId引數有四個值,HYBRID,ROADMAP,SATELLITE,TERRAIN,對應的效果如下,預設的是ROADMAP。

 

2、新增標註點
 

      this.ptstart = {
        lat: 29.860346,
        lng: 121.632576
      }
      var markerStart = new google.maps.Marker({
        position: this.ptstart
      })
      markerStart.setMap(this.map)


還有一種方式

      this.ptstart = {
        lat: 29.860346,
        lng: 121.632576
      }
      var markerStart = new google.maps.Marker({
        position: this.ptstart,
        map: this.map
      })


但是這種方式vue會一直報錯'markerStart' is assigned a value but never used,不影響程式執行,如果介意報錯資訊就採用第一種方式
刪除標記的語句是

markerStart.setMap(null)

3、自定義圖示

      var markerShip = new google.maps.Marker({
        position: this.ptship,
        icon: '/static/ship.png'
      })
      markerShip.setMap(this.map)


只要加一個icon引數即可

4、資訊視窗
 

      var infowindow = new google.maps.InfoWindow({
        content: '測試資訊視窗'
      })
      markerStart.addListener('click', function () {
        infowindow.open(this.map, markerStart)
      })


資訊視窗的content也可以是html語句

5、監聽地圖事件

      google.maps.event.addListener(this.map, 'click', function (event) {
        var marker2 = new google.maps.Marker({
          position: event.latLng,
          map: this.map
        })
      }.bind(this))

更多用法參考官方文件
https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-cn