本文概述
HTML Google Map用于在你的网页上显示地图。你只需在基本HTML页面上添加地图即可。
句法:
<!DOCTYPE html>
<html>
<body>
<h1>First Google Map Example</h1>
<div id="map">My map will go here...</div>
</body>
</html>
设置地图大小
你可以使用以下语法设置地图大小:
<div id="map" style="width:400px;height:400px;background:grey"></div>
如何创建设置地图属性的功能?
你可以通过创建函数来设置地图属性。在这里, 函数是myMap()。本示例显示了以英国伦敦为中心的Google地图。
我们必须使用Google的JavaScript库提供的Google Maps API的功能。使用以下脚本通过回调myMap函数来引用Google Maps API。
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
例:
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map" style="width:400px;height:400px;background:grey"></div>
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12), zoom: 10, mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</body>
</html>
立即测试
示例说明
mapOptions:这是一个变量, 用于定义地图的属性。
中心:指定地图中心的位置(使用纬度和经度坐标)。
zoom:指定地图的缩放级别(尝试尝试缩放级别)。
mapTypeId:指定要显示的地图类型。支持以下地图类型:ROADMAP, SATELLITE, HYBRID和TERRAIN。
var map = new google.maps.Map(document.getElementById(“ map”), mapOptions):它将在