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手册地址: