google maps js v3 api教程(1) -- 創建一個地圖


原文地址

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,
//如果沒有key,則可以將 "key=YOUR_API_KEY&callback=initMap"這段代碼去掉即可 </script> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> </body> </html>

使用上述代碼,則可以創建一個地圖了。

如果因為網絡問題,無法訪問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類型,是否顯示可以改變地圖大小的控件

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM