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类型，是否显示可以改变地图大小的控件
时间： 2024-10-25 02:52:11