DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Google 地圖API Map()構造器詳解
Google 地圖API Map()構造器詳解
編輯:關於JavaScript     

地圖 API Map() 構造器

實例

創建一個 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() 構造器創建了一個新的地圖並插入到指定的HTML元素中(<div> 元素)。

語法

new google.maps.Map(HTMLElement,MapOptions)

參數值

參數 描述 HTMLElement 規定要把地圖放置在那個 HTML 元素中。 MapOptions 帶有地圖初始化變量/選項的 MapOptions 對象。

Map()的方法

方法 返回值 描述 fitBounds(LatLngBounds) None 設置要包含給定邊界的視口。 getBounds() LatLng,LatLng 返回當前視口的西南緯度/經度和東北緯度/經度。 getCenter() LatLng 返回地圖的中心的緯度/經度。 getDiv() Node 返回包含地圖的 DOM 對象。 getHeading() number 返回航拍圖像的羅盤航向(支持 SATELLITE 和 HYBRID 地圖類型)。 getMapTypeId() HYBRID ROADMAP SATELLITE TERRAIN 返回當前地圖類型。 getProjection() Projection 返回當前 Projection(投影)。 getStreetView() StreetViewPanorama 返回綁定到地圖的默認的 StreetViewPanorama。 getTilt() number 返回航拍圖像的入射角度數(支持 SATELLITE 和 HYBRID 地圖類型)。 getZoom() number 返回地圖的當前縮放級別。 panBy(xnumber,ynumber) None 通過以像素計的給定距離改變地圖的中心。 panTo(LatLng) None 改變地圖的中心為給定的 LatLng。 panToBounds(LatLngBounds) None 將地圖平移所需的最小距離以包含給定的 LatLngBounds。 setCenter(LatLng) None setHeading(number) None 設置航拍圖像的羅盤方向(以度為單位進行測量),基本方向為北方。 setMapTypeId(MapTypeId) None 改變要顯示的地圖類型。 setOptions(MapOptions) None setStreetView(StreetViewPanorama) None 綁定一個 StreetViewPanorama 到地圖上。 setTilt(number) None 設置航拍圖像的入射角度數(支持 SATELLITE 和 HYBRID 地圖類型)。 setZoom(number) None

Map()的屬性

屬性 類型 描述 controls Array.<MVCArray.<Node>> 要附加到地圖上的額外控件。 mapTypes MapTypeRegistry 按字符串 ID 劃分的 MapType 實例的注冊表。 overlayMapTypes MVCArray.<MapType> 要疊加的額外地圖類型。

Map()的事件

事件 參數 描述 bounds_changed None 當可視區域范圍更改時會觸發此事件。 center_changed None 當地圖 center(中心)屬性更改時會觸發此事件。 click MouseEvent 當用戶點擊地圖(但不是點擊標記或信息窗口)時會觸發此事件。 dblclick MouseEvent 當用戶雙擊地圖時會觸發此事件。請注意,觸發此事件前還會觸發點擊事件。 drag None 當用戶拖動地圖時會反復觸發此事件。 dragend None 當用戶停止拖動地圖時會觸發此事件。 dragstart None 當用戶開始拖動地圖時會觸發此事件。 heading_changed None 當地圖 heading(方向)屬性更改時會觸發此事件。 idle None 當地圖在平移或縮放之後變為閒置狀態時會觸發此事件。 maptypeid_changed None 當 mapTypeId 屬性更改時會觸發此事件。 mousemove MouseEvent 只要用戶的鼠標在地圖容器上移動,就會觸發此事件。 mouseout MouseEvent 當用戶的鼠標從地圖容器上退出時會觸發此事件。 mouseover MouseEvent 當用戶的鼠標進入地圖容器時會觸發此事件。 projection_changed None 當投影更改時會觸發此事件。 resize None 當地圖(div)更改尺寸時會觸發此事件。 rightclick MouseEvent 當用戶右擊地圖時會觸發此事件。 tilesloaded None 當可見圖塊載入完成後會觸發此事件。 tilt_changed None 當地圖 tilt(傾斜)屬性更改時會觸發此事件。 zoom_changed None 當地圖 zoom(縮放)屬性更改時會觸發此事件。  

以上就是對Google 地圖Map()構造器的資料整理,後續繼續補充相關資料,謝謝大家對本站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved