Google 地圖API Map()構(gòu)造器詳解
地圖 API Map() 構(gòu)造器
實(shí)例
創(chuàng)建一個 Google 地圖:
<html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> function initialize() { var mapOpt = { 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"),mapOpt); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>
定義和用法
Map() 構(gòu)造器創(chuàng)建了一個新的地圖并插入到指定的HTML元素中(<div> 元素)。
語法
new google.maps.Map(HTMLElement,MapOptions)
參數(shù)值
參數(shù) | 描述 |
---|---|
HTMLElement | 規(guī)定要把地圖放置在那個 HTML 元素中。 |
MapOptions | 帶有地圖初始化變量/選項的 MapOptions 對象。 |
Map()的方法
方法 | 返回值 | 描述 |
---|---|---|
fitBounds(LatLngBounds) | None | 設(shè)置要包含給定邊界的視口。 |
getBounds() | LatLng,LatLng | 返回當(dāng)前視口的西南緯度/經(jīng)度和東北緯度/經(jīng)度。 |
getCenter() | LatLng | 返回地圖的中心的緯度/經(jīng)度。 |
getDiv() | Node | 返回包含地圖的 DOM 對象。 |
getHeading() | number | 返回航拍圖像的羅盤航向(支持 SATELLITE 和 HYBRID 地圖類型)。 |
getMapTypeId() | HYBRID ROADMAP SATELLITE TERRAIN | 返回當(dāng)前地圖類型。 |
getProjection() | Projection | 返回當(dāng)前 Projection(投影)。 |
getStreetView() | StreetViewPanorama | 返回綁定到地圖的默認(rèn)的 StreetViewPanorama。 |
getTilt() | number | 返回航拍圖像的入射角度數(shù)(支持 SATELLITE 和 HYBRID 地圖類型)。 |
getZoom() | number | 返回地圖的當(dāng)前縮放級別。 |
panBy(xnumber,ynumber) | None | 通過以像素計的給定距離改變地圖的中心。 |
panTo(LatLng) | None | 改變地圖的中心為給定的 LatLng。 |
panToBounds(LatLngBounds) | None | 將地圖平移所需的最小距離以包含給定的 LatLngBounds。 |
setCenter(LatLng) | None | |
setHeading(number) | None | 設(shè)置航拍圖像的羅盤方向(以度為單位進(jìn)行測量),基本方向?yàn)楸狈健?/td> |
setMapTypeId(MapTypeId) | None | 改變要顯示的地圖類型。 |
setOptions(MapOptions) | None | |
setStreetView(StreetViewPanorama) | None | 綁定一個 StreetViewPanorama 到地圖上。 |
setTilt(number) | None | 設(shè)置航拍圖像的入射角度數(shù)(支持 SATELLITE 和 HYBRID 地圖類型)。 |
setZoom(number) | None |
Map()的屬性
屬性 | 類型 | 描述 |
---|---|---|
controls | Array.<MVCArray.<Node>> | 要附加到地圖上的額外控件。 |
mapTypes | MapTypeRegistry | 按字符串 ID 劃分的 MapType 實(shí)例的注冊表。 |
overlayMapTypes | MVCArray.<MapType> | 要疊加的額外地圖類型。 |
Map()的事件
事件 | 參數(shù) | 描述 |
---|---|---|
bounds_changed | None | 當(dāng)可視區(qū)域范圍更改時會觸發(fā)此事件。 |
center_changed | None | 當(dāng)?shù)貓D center(中心)屬性更改時會觸發(fā)此事件。 |
click | MouseEvent | 當(dāng)用戶點(diǎn)擊地圖(但不是點(diǎn)擊標(biāo)記或信息窗口)時會觸發(fā)此事件。 |
dblclick | MouseEvent | 當(dāng)用戶雙擊地圖時會觸發(fā)此事件。請注意,觸發(fā)此事件前還會觸發(fā)點(diǎn)擊事件。 |
drag | None | 當(dāng)用戶拖動地圖時會反復(fù)觸發(fā)此事件。 |
dragend | None | 當(dāng)用戶停止拖動地圖時會觸發(fā)此事件。 |
dragstart | None | 當(dāng)用戶開始拖動地圖時會觸發(fā)此事件。 |
heading_changed | None | 當(dāng)?shù)貓D heading(方向)屬性更改時會觸發(fā)此事件。 |
idle | None | 當(dāng)?shù)貓D在平移或縮放之后變?yōu)殚e置狀態(tài)時會觸發(fā)此事件。 |
maptypeid_changed | None | 當(dāng) mapTypeId 屬性更改時會觸發(fā)此事件。 |
mousemove | MouseEvent | 只要用戶的鼠標(biāo)在地圖容器上移動,就會觸發(fā)此事件。 |
mouseout | MouseEvent | 當(dāng)用戶的鼠標(biāo)從地圖容器上退出時會觸發(fā)此事件。 |
mouseover | MouseEvent | 當(dāng)用戶的鼠標(biāo)進(jìn)入地圖容器時會觸發(fā)此事件。 |
projection_changed | None | 當(dāng)投影更改時會觸發(fā)此事件。 |
resize | None | 當(dāng)?shù)貓D(div)更改尺寸時會觸發(fā)此事件。 |
rightclick | MouseEvent | 當(dāng)用戶右擊地圖時會觸發(fā)此事件。 |
tilesloaded | None | 當(dāng)可見圖塊載入完成后會觸發(fā)此事件。 |
tilt_changed | None | 當(dāng)?shù)貓D tilt(傾斜)屬性更改時會觸發(fā)此事件。 |
zoom_changed | None | 當(dāng)?shù)貓D zoom(縮放)屬性更改時會觸發(fā)此事件。 |
以上就是對Google 地圖Map()構(gòu)造器的資料整理,后續(xù)繼續(xù)補(bǔ)充相關(guān)資料,謝謝大家對本站的支持!
相關(guān)文章
前端加密cryptojs與JSEncrypt使實(shí)例詳解
這篇文章主要為大家介紹了前端加密cryptojs與JSEncrypt使實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08JavaScript?定時器關(guān)鍵點(diǎn)及使用場景解析
這篇文章主要為大家介紹了JavaScript?定時器關(guān)鍵點(diǎn)及使用場景解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01微信小程序?qū)崿F(xiàn)緩存根據(jù)不同的id來進(jìn)行設(shè)置和讀取緩存
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)緩存根據(jù)不同的id來進(jìn)行設(shè)置和讀取緩存的相關(guān)資料,需要的朋友可以參考下2017-06-06微信小程序教程之本地圖片上傳(leancloud)實(shí)例詳解
這篇文章主要介紹了微信小程序教程之本地圖片上傳(leancloud)實(shí)例詳解的相關(guān)資料,這里舉例說明該如何實(shí)現(xiàn)和實(shí)例代碼,文章一一表述,需要的朋友可以參考下2016-11-11Flask中獲取小程序Request數(shù)據(jù)的兩種方法
這篇文章主要介紹了Flask中獲取小程序Request數(shù)據(jù)的兩種方法的相關(guān)資料,需要的朋友可以參考下2017-05-05