google地图学习笔记（1）

最新推荐文章于 2024-04-15 06:04:44 发布

做我的code吧

最新推荐文章于 2024-04-15 06:04:44 发布

阅读量623

点赞数

分类专栏：学习笔记 google map 文章标签： javascript html google maps

本文链接：https://blog.csdn.net/yueguangMaNong/article/details/108271659

版权

学习笔记同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

google map

1 篇文章 0 订阅

订阅专栏

google地图学习笔记（1）

文章目录

google地图学习笔记（1）

关于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>
  <!-- 链接中的key是从官网复制来的，如果不能访问，请重新去官网找可用的key -->
  <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

<script defer
  // 加载google地图时的URL，需要用自己的API_KEY替换URL中的【YOUR_API_KEY】
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

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

google地图API手册

google地图API手册地址：

google地图开发者指引

google地图API详细说明

google地图官方样例

做我的code吧

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
google地图学习笔记（1）

google地图学习笔记（1）文章目录google地图学习笔记（1）关于API_KEY的说明第一个程序：Hello World支持的地图类型zoom高度API Keygoogle地图API手册关于API_KEY的说明API_key是访问谷歌地图必须的。谷歌也是按调用次数收费的，因此如果要做项目的话，还是得搞一个账号（必须要有visa银行卡实名认证才行），现在注册应该是有一年一千次免费调用，作为项目的可行性调研的话应该是够用了。如果没有账号，也没关系，在google的开发者手册中，找到你要的功能，然后按
复制链接

扫一扫