个性化阅读
专注于IT技术分析

HTML Google地图

本文概述

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):它将在

赞(0)
未经允许不得转载:srcmini » HTML Google地图

评论 抢沙发

评论前必须登录!