google地图学习笔记（1）

怼烎@ 2022-12-01 15:47 188阅读 0赞

# google地图学习笔记（1） #

### 文章目录 ###

*  google地图学习笔记（1）
 *   *  关于API\_KEY的说明
     *  第一个程序：Hello World
     *  支持的地图类型
     *  zoom高度
     *  API Key
     *  google地图API手册

## 关于API\_KEY的说明 ##

API\_key是访问谷歌地图必须的。谷歌也是按调用次数收费的，因此如果要做项目的话，还是得搞一个账号（必须要有visa银行卡实名认证才行），现在注册应该是有一年一千次免费调用，作为项目的可行性调研的话应该是够用了。如果没有账号，也没关系，在google的开发者手册中，找到你要的功能，然后按F12查看请求，找到请求参数中带有KEY的，直接把那个值复制过来就可以用了，缺点是这个key经常更换，也许今天能用，但是明天就没用了，所以需要经常更换。

--------------------

## 第一个程序：Hello World ##

老规矩，第一个程序都是从Hello world开始的。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      
      <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCPJpjD-qcR_yIxJnS8maR5W9KB0E3EzYI&callback=initMap"
        defer
      ></script>
      <style>
          /* 全屏 */
          html, body {
         
              height: 100%;
              margin: 0;
              padding: 0;
          }
          /* 全屏 */
          #map {
         
              height: 100%;
          }
      </style>
    </head>
    <body>
    
    <div id="map"></div>
    
    <script>
        // 加载google的URL中指定了回调函数，因此页面加载完毕后会调用这个方法
        function initMap() {
         
            // 初始化一个地图对象，将地图显示到id为map的div中
            map = new google.maps.Map(document.getElementById("map"), {
         
                // 设置地图的中心点坐标
                center: {
         lat: -34.397,lng: 150.644},
                // 设置地图类型,道路模式，也是默认值
                mapTypeId: 'roadmap',
                // 地图显示高度
                zoom: 12
            });
        }
    </script>
    </body>
    </html>

## 支持的地图类型 ##

*  `roadmap`显示默认的路线图视图。这是默认的地图类型。
 *  `satellite` 显示Google Earth卫星图像。
 *  `hybrid` 普通视图和卫星视图的混合显示。
 *  `terrain` 根据地形信息显示物理地图。

> 动态修改地图类型

map.setMapTypeId('terrain');

> 45°视角

在可用的情况下，`satellite`和 `hybrid`地图类型支持45度高缩放图像

*  开启
    
        map.setTilt(45);
 *  关闭
    
        map.setTilt(0);

## zoom高度 ##

【1~20】数值越大越详细，大致级别：

*  1：世界
 *  5：大陆/大陆
 *  10：城市
 *  15：街道
 *  20：建筑物

## API Key ##

如果还没有API\_KEY，可以到google 地图中查看示例程序所有的KEY，复制过来即可使用，貌似每天都会更新，所以每天都需要去获取一次

## google地图API手册 ##

google地图API手册地址：

[google地图开发者指引][google]

[google地图API详细说明][google_API]

[google地图官方样例][google 1]

[google]: https://developers.google.com/maps/documentation/javascript/overview
[google_API]: https://developers.google.com/maps/documentation/javascript/reference
[google 1]: https://developers.google.com/maps/documentation/javascript/examples