google maps js v3 api教程(1) -- 创建一个地图

来源：互联网发布：淘宝直播怎么抢优惠券编辑：程序博客网时间：2024/05/16 16:35

原文地址

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

0 0