登入進去 ,如果有google賬号就直接登入,如果沒有就注冊一下
進去之後大概這個樣子
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiAzNfRHLGZkRGZkRfJ3bs92YsYTMfVmepNHL2FzVaFDaIJGbG12Y2YkMMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL2MTNxEjMzUTM2EjNwAjMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
點選左邊的Google地圖,然後會看到有很多api,選擇你需要使用的
這裡我們選擇Maps JavaScript API
點選進去啟用就可以
然後我們需要記住我們的api key
可以在憑據裡面找到
下面我們來在我們的頁面上添加一個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>
效果圖
首先是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(縮放)屬性更改時會觸發此事件。