HTML 谷歌地图
在 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 中的预定义标签，例如
我们在网页上创建地图时会在第三步中获取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>输出：
示例#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>输出：
示例 #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>输出：
在上面的示例中，我们使用三种不同样式的 Google 地图，并通过预定义的 HTML 元素、属性和 JavaScript 函数来调用网页中的地图 API。
结论
使用文档的地图 API 来识别 javascript 函数中的位置。它完全基于传感器。当我们在谷歌地图中使用手机时，我们将启用该位置仅获取从源位置到目的地方向的数据。我们还检查应用程序是否接受传感器来检测用户位置并检查浏览器兼容性问题传感器参数未长时间使用。
以上是HTML 谷歌地图的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
