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类型,是否显示可以改变地图大小的控件

 

你可能感兴趣的:(JavaScript,Google,maps)