您的位置：首页 > Web前端 > JavaScript

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

2016-02-19 17:21 453 查看

原文地址

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

相关文章推荐

新的分享

章节导航