從零開始學google地圖API(1)--擷取api_key并顯示google地圖

google

登入進去 ,如果有google賬号就直接登入，如果沒有就注冊一下

進去之後大概這個樣子

點選左邊的Google地圖,然後會看到有很多api,選擇你需要使用的

這裡我們選擇Maps JavaScript API

從零開始學google地圖API(1)--擷取api_key并顯示google地圖

點選進去啟用就可以

然後我們需要記住我們的api key

可以在憑據裡面找到

從零開始學google地圖API(1)--擷取api_key并顯示google地圖

下面我們來在我們的頁面上添加一個google地圖

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
 <script>
function initialize()
{
    var mapProp = {
        center:new google.maps.LatLng(51.508742,-0.120850),
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
 google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

效果圖

從零開始學google地圖API(1)--擷取api_key并顯示google地圖

首先是googlemap api

跟之前的jquery類似，google api也需要引用

注意修改兩個地方

key=YOUR_API_KEY 可以在你自己申請的goolge map裡找到，替換成你自己的api

sensor指明應用程式是否使用一個傳感器 (類似 GPS 導航) 來定位使用者的位置,參數值可以設定為 true 或者 false

如果你的應用是安全的HTTP(HTTPS:HTTP Secure)應用,你可以使用 HTTPS 來加載 Google 地圖 API,

Map() 構造器建立了一個新的地圖并插入到指定的HTML元素中（一般是

<div>

元素)

new google.maps.Map(HTMLElement,MapOptions)

HTMLElement 規定要把地圖放置在哪個 HTML 元素中

MapOptions 帶有地圖初始化變量/選項的 MapOptions 對象//就是我們之前定義的地圖屬性

在上面的案例中

function initialize()
{
    var mapProp = {
        center:new google.maps.LatLng(51.508742,-0.120850),
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
};

一般情況下，我們都會在一個初始化函數中定義好map屬性，然後通過調用初始化函數實作接入地圖

mapProp在這裡就是我們自定義的地圖屬性，可以看到裡面有

center

中心點,指定了地圖的中心,該中心通過坐标（緯度，經度）在地圖上建立一個中心點

zoom

縮放級數,zoom:0,顯示了整個地球地圖的完全縮放,zoom後面的數越大，顯示的範圍越小，看的越詳細

mapTypeId

地圖的初始類型,包括如下四種類型

google.maps.MapTypeId.HYBRID：顯示衛星圖像的主要街道透明層

google.maps.MapTypeId.ROADMAP：顯示普通的街道地圖

google.maps.MapTypeId.SATELLITE：顯示衛星圖像

google.maps.MapTypeId.TERRAIN：顯示帶有自然特征（如地形和植被）的地圖

定義完之後，通過剛才介紹的Map建立函數生成我們的地圖

var map=new google.maps.Map(document.getElementById(“googleMap”), mapProp);

參數應該比較好了解,document.getElementById(“googleMap”),在之後的body部分裡，我們可以通過id綁定來顯示地圖

mapProp就是上一步定義的地圖對象

initialize函數寫好後，還要有一個調用條件

加載地圖,視窗(window)載入後(load)通過執行 initialize() 函數(剛才定義的地圖初始化函數)來初始化 Map 對象，這樣可以確定在頁面完全載入後再加載 Google 地圖

<div id="googleMap" style="width:500px;height:380px;"></div>//我們可以在 <div> 元素中設定地圖的大小,div裡面style對應的大小就是地圖的大小

通常 Google 地圖使用于

<div>

元素中,令div的id為剛才的googleMap實作在div裡顯示地圖

上面一種是預先加載好google的api,同樣我們也可以在頁面完全載入後再加載 Google 地圖 API

<!DOCTYPE html>
<html>
<head>
 <script>
function initialize()
{
    var mapProp = {
        center:new google.maps.LatLng(51.508742,-0.120850),
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

function loadAPI()
{
  var script = document.createElement("script");//建立一個javascript的節點
  script.type = "text/javascript";//類型
  script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";//根之前一樣，替換掉你的内容
  document.body.appendChild(script);
}
window.onload = loadAPI;

 google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

跟剛才的差別主要是少了一個

<script src></script>

,多了一個loadAPI函數

function loadAPI()
{
  var script = document.createElement("script");//建立一個javascript的節點其實就是<script src></srcipt>
  script.type = "text/javascript";//類型,其實不寫也可以
  script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";//跟之前一樣，替換成 你的内容
  document.body.appendChild(script);
}
window.onload = loadAPI;//頁面加載時初始化

使用了 window.onload 來實作頁面載入時加載 Google 地圖 ,loadAPI() 函數建立了加載 Google 地圖 API

<script>

标簽。此外在标簽的末尾添加了 callback=initialize參數，initialize()作為回調函數會在API完全載入後執行,效果都一樣，還是根據個人喜歡選擇

再額外簡單補充一點

Map()

這個本來是在後面需要使用上的，但我在這裡簡單說明一下

var map=new google.maps.Map(document.getElementById(“googleMap”), mapProp);

生成了個map,綁定的是我們map對象，可以通過

map.function()

來進一步實作以下功能

fitBounds(LatLngBounds)

将地圖視層盡可能大的設定在給定的地理邊界内,無傳回值,通常搭配getBounds

getBounds()

傳回目前視口的西南緯度/經度和東北緯度/經度(LatLng,LatLng )

通過map.fitBounds(layer.getBounds());來實作地圖視層的調整(layer會在之後講到，可以是标記，也可以是一個點)

getCenter()

傳回地圖的中心的緯度/經度,(LatLng）

getDiv()

傳回包含地圖的 DOM 對象

剛才試了一下,傳回[object HTMLDivElement]

getHeading()

傳回航拍圖像的羅盤航向度數（支援 SATELLITE 和 HYBRID 地圖類型）(number)

getMapTypeId()

傳回目前地圖類型,跟先前提到的對應( hybrid roadmap satellite terrain )

getProjection()

傳回目前 Projection（投影）。

getStreetView()

傳回綁定到地圖的預設的 StreetViewPanorama。

getTilt()

傳回航拍圖像的入射角度數（支援 SATELLITE 和 HYBRID 地圖類型）。

getZoom()

傳回地圖的目前縮放級别(number,0,1,2,3…)

panBy(xnumber,ynumber)

通過以像素計的給定距離改變地圖的中心,無傳回值

panTo(LatLng)

改變地圖的中心為給定的 LatLng,無傳回值

panToBounds(LatLngBounds)

将地圖平移所需的最小距離以包含給定的 LatLngBounds,無傳回值,同樣也可以跟上面getBounds搭配

setCenter(LatLng)

改變地圖的中心為給定的 LatLng,無傳回值,我個人不知道它和panTo有什麼明顯的差別，感覺上差不多

setHeading(number)

設定航拍圖像的羅盤方向（以度為機關進行測量）基本方向為北方,無傳回值

setMapTypeId(MapTypeId)

改變要顯示的地圖類型,無傳回值

setOptions(MapOptions)

無傳回值

setStreetView(StreetViewPanorama)

綁定一個 StreetViewPanorama 到地圖上,無傳回值

setTilt(number)

置航拍圖像的入射角度數（支援 SATELLITE 和 HYBRID 地圖類型）無傳回值

setZoom(number)

無傳回值

Map() 的事件

bounds_changed

當可視區域範圍更改時會觸發此事件。

center_changed

當地圖 center（中心）屬性更改時會觸發此事件。

click

當使用者點選地圖（但不是點選标記或資訊視窗）時會觸發此事件MouseEvent

dblclick

當使用者輕按兩下地圖時會觸發此事件。請注意，觸發此事件前還會觸發點選事件MouseEvent

drag

當使用者拖動地圖時會反複觸發此事件。

dragend

當使用者停止拖動地圖時會觸發此事件。

dragstart

當使用者開始拖動地圖時會觸發此事件。

heading_changed

當地圖 heading（方向）屬性更改時會觸發此事件。

idle

當地圖在平移或縮放之後變為閑置狀态時會觸發此事件。

maptypeid_changed

當 mapTypeId 屬性更改時會觸發此事件。

mousemove

隻要使用者的滑鼠在地圖容器上移動，就會觸發此事件MouseEvent

mouseout

當使用者的滑鼠從地圖容器上退出時會觸發此事件MouseEvent

mouseover

當使用者的滑鼠進入地圖容器時會觸發此事件MouseEvent

projection_changed 當投影更

改時會觸發此事件。

resize

當地圖（div）更改尺寸時會觸發此事件。

rightclick

當使用者右擊地圖時會觸發此事件 MouseEvent

tilesloaded

當可見圖塊載入完成後會觸發此事件。

tilt_changed

當地圖 tilt（傾斜）屬性更改時會觸發此事件。

zoom_changed

當地圖 zoom（縮放）屬性更改時會觸發此事件。

從零開始學google地圖API(1)--擷取api_key并顯示google地圖

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條