google maps javascript官方文檔:https://developers.google.com/maps/documentation/javascript/
在創建地圖之前,我們進入 Google Developers Console創建一個key,用於我們開發地圖的身份驗證(當然,沒有key也可以進行接下來的教程)
創建一個簡單的地圖:
<!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> //地圖的樣式 <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> </head> <body> <div id="map"></div> <script> var map; function initMap() { //創建一個地圖 map = new google.maps.Map(document.getElementById('map'), { //設置地圖的中心點經緯度 center: {lat: 34, lng: 112}, //設置地圖的縮放級別(0~21) zoom: 8 }); } //google maps javascript API,如果已經創建了key,則可將key后邊的YOUR_API_KEY替換為你所得到的key, |
使用上述代碼,則可以創建一個地圖了。
如果因為網絡問題,無法訪問google服務器,則可以將“maps.googleapis.com/maps/api/js”換為“maps.google.cn/maps/api/js”試一下
創建地圖的構造函數原型:Map(mapDiv:Node,opts?:MapOptions)
上述代碼中的center和zoom就是MapOptions中的兩個屬性,比較常用的還有:
draggable:bool類型,控制地圖是否可以拖動
mapTypeId:HYBRID/ROADMAP/SATELLITE/TERRAIN,四種地圖的類型,可以自己動手試下效果
mapTypeControl:bool類型,是否顯示可以改變地圖類型的控件
maxZoom:設置地圖最大縮放等級
minZoom:設置地圖最小縮放等級
zoomControl:bool類型,是否顯示可以改變地圖大小的控件