HTML 谷歌地图

WBOY原创: 2024-09-04 16:42:13765浏览

在 HTML 中，我们在前面的文章中讨论了元素的一些属性和属性。它具有许多吸引网络技术在线用户的功能。 Google 地图是 Google 公司的功能之一，我们将在 HTML 代码中使用相同的 Google 地图来在网站上显示位置。主要用于公司网站准确识别其所在区域的位置。它通过使用 javascript 语言调用 HTML 来定位和设置公司地理位置的纬度和经度。

语法：

HTML 对每个标签都有通用语法来开发网页内容。

<html>
<body>
<script src="google-api url">
function()
{
}
</script>
</body>
</html>

HTML Google 地图的语法是在 script 标签中添加 Google API，然后我们将设置网页内容的地理位置。我们可以将一些HTML元素和属性对齐并使用到网页中来吸引用户，这将是公司和业务的增长。我们将根据业务需求定制具有用户友好环境的网页。

如何用 HTML 创建 Google 地图？

我们将使用 <script> 在我们的网页上调用 Google 地图 API标签。我们主要可以在HTML页面添加Google地图后设置标记；它包含三个步骤。 1. 我们将首先创建一个 HTML 页面， 2. 然后添加带有标记的地图。 3. 最后，我们将获得 API 密钥来验证位置。我们将根据定制的招股说明书使用预定义标签创建一个 HTML 页面，如果需要使用 <div> ，也会对齐页面中的样式属性。元素;我们将在网站中使用单独的模块视图分隔内容。</script>

添加带有标记的地图是在网页上创建 Google 地图的第二个级别。本节将描述如何将 javascript API 中的地图加载到网页中，并且我们还将编写使用 API 的 javascript 函数，为网页添加带有标记的地图。当我们在脚本标签中添加API时，回调参数将在脚本加载地图API后执行一些条件，例如initMap函数。如果我们在网页脚本中使用异步属性，浏览器允许 API 加载网页的其余渲染页面内容。在Google地图API URL的脚本标签中，我们将看到它包含API密钥的关键参数。本节我们不设置任何key，会自动生成API key，然后使用带参数的initMap函数调用回调参数。

每当我们使用带有脚本标签 HTML 标签的 javascript 函数加载网页时，initMap 函数将用于初始化并添加地图。我们将在函数中调用一些默认方法，例如 getElementById() 是 javascript 库中的函数之一，用于通过分隔

来查找网页上的地图位置。 HTML 中的标签。在 Script 函数中，我们将使用与 Java 编程语言中相同的 new 运算符创建地图实例，new google.maps.Map() 是在 javascript 函数中创建 Google 地图实例的语法。

我们将使用 HTML 中的预定义标签，例如

、侧边导航来定位网页中的地图位置；地图将按照第一个纬度和经度的顺序协调 HTML 页面。我们将设置最小和最大尺寸的缩放选项以及网页的纵向和横向导航。如果zoom属性设置了像0这样的值，则缩放剖面视图中的最低部分，并且它在单个页面上显示整个地图。对于网页上的高分辨率图像，我们可以在缩放属性中设置较高的值。我们将使用position属性来设置标记在网页上的位置。

我们在网页上创建地图时会在第三步中获取API key；该密钥将用于验证我们定制的 API 密钥中的地图和 javascript 函数。使用包含用于创建 API 密钥的选项的 Google Cloud Platform 控制台工具。

HTML Google 地图示例

以下是 HTML Google 地图的示例：

示例#1

代码：

<html>
<body>
<div id="m" style="width:402px;height:433px;background:green"></div>
<script>
function sample() {
var m1 = {
center: new google.maps.LatLng(52.3, -0.14),
zoom: 13,
mapss: google.maps.MapTypeId.HYBRID
}
var m2 = new google.maps.Map(document.getElementById("m"), m1);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=sample"></script>
</body>
</html>

输出：

HTML 谷歌地图

示例#2

代码：

<html>
<head>
<style>
#m {
height: 403px;
width: 102%;
}
</style>
</head>
<body>
<div id="m"></div>
<script>
function initMap() {
var loc = {lat: -26.334, lng: 132.034};
var m1 = new google.maps.Map(
document.getElementById('m'), {zoom: 3, center: loc});
var mar = new google.maps.Marker({position: loc, map: m1});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>

输出：

HTML 谷歌地图

示例 #3

代码：

<!DOCTYPE html>
<html>
<body>
<div id="m1" style="width:402px;height:303px;"></div>
<br>
<div id="m2" style="width:402px;height:303px;"></div>
<br>
<div id="m3" style="width:402px;height:303px;"></div>
<br>
<div id="m4" style="width:402px;height:303px;"></div>
<script>
function sample() {
var choice1 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.ROADMAP
};
var choice2 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.SATELLITE
};
var choice3 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.HYBRID
};
var choice4 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.TERRAIN
};
var i = new google.maps.Map(document.getElementById("m1"),choice1);
var j = new google.maps.Map(document.getElementById("m2"),choice2);
var k = new google.maps.Map(document.getElementById("m3"),choice3);
var l = new google.maps.Map(document.getElementById("m4"),choice4);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=sample"></script>
</body>
</html>

输出：

HTML 谷歌地图

在上面的示例中，我们使用三种不同样式的 Google 地图，并通过预定义的 HTML 元素、属性和 JavaScript 函数来调用网页中的地图 API。

结论

使用文档的地图 API 来识别 javascript 函数中的位置。它完全基于传感器。当我们在谷歌地图中使用手机时，我们将启用该位置仅获取从源位置到目的地方向的数据。我们还检查应用程序是否接受传感器来检测用户位置并检查浏览器兼容性问题传感器参数未长时间使用。

以上是HTML 谷歌地图的详细内容。更多信息请关注PHP中文网其他相关文章！

Java JavaScript html if for using operator finally Property map console function default this location position issue zoom

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：HTML Reset Button下一篇：HTML Hide Element

查看更多