65.9K
CodeProject 正在变化。 阅读更多。
Home

3 天学习 HTML 5 - 第 2 天 - 第 2 部分

Marla Sukesh
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.75/5 (18投票s)

2016年1月17日

CPOL

18分钟阅读

viewsIcon

36314

downloadIcon

5930

这是“3天学会HTML5”文章的第2天第2部分的续篇。

引言

您能看到这里，说明您还在享受这个系列。如果您想了解基础知识和其他功能，我强烈建议您先去查看上一部分。让我们开始吧。

完整列表

第2天 - 第2部分议程

  • 实验14 - Web Worker
  • 实验15 - Web Worker 和 Ajax
  • 实验16和实验17 - HTML5 媒体 - 视频
  • 实验18和实验19 HTML5 媒体 - 音频
  • 实验20和实验21 - 拖放
  • 实验22 - 地理位置
  • 实验23 - 结合Google地图的地理位置

Web Worker

什么是Web Worker？

在我继续之前，请允许我问您一个简单的问题。您是否在您的Web应用程序中遇到过以下错误？

如果遇到过，那么Web Worker就是这个问题的解决方案。（错误显示的样式可能因浏览器而异）。

长时间运行的JavaScript会导致UI无响应，并且很多时候会导致上述错误。此类问题的唯一解决方案是客户端多线程。不幸的是，这在以前是不可能的，但现在借助HTML5，通过使用Web Worker，我们可以在客户端实现多线程。

让我们做一个小演示来理解Web Worker

 

实验22 - 理解Web Worker - 简单版

这将是一个非常简单的实验。在这里，我们将从最终用户那里接受一个数字“N”，然后显示前“N”个数字的和。

注意：我们将在不使用Web Worker的情况下开始演示，理解输出，然后将其迁移到Web Worker。

 

步骤1：创建新的Asp.Net项目

打开Visual Studio。点击 文件>>新建项目。

在对话框中，在左侧选择“Web”，在右侧选择“Asp.Net Web Application”，然后点击“OK”。

在下一个对话框中选择“Empty”，然后点击“OK”。

 

步骤2：创建HTML文件

将以下HTML放入 WebWorker.Html 文件的 body 中。

<input type="text" name="myText" id="myText" value=" " />
<input type="button" name="name" value="Generate" />

 

步骤3：下载加载图片

从某个地方获取一张您喜欢的GIF图片，并将其命名为 loading.gif，然后将其放入项目中。（如果您愿意，也可以从附件的示例中下载。）

 

步骤4：下载jQuery

从 jQuery.com 下载jQuery文件，或从附件的示例中下载，并将其包含在项目中。

快速说明一下，jQuery是一个JavaScript库，它使DOM操作和DOM遍历更加容易。简单来说，使用这个库，我们可以轻松地针对HTML进行编程。

本实验或系列文章不会要求参与者具备jQuery知识。我们只使用jQuery的一些功能，这些功能都会得到解释。

 

步骤5：包含jQuery

只需按照以下方式将jQuery脚本文件包含在 WebWorker.html 文件的 head 部分。

<script src="jquery-1.4.4.min.js"></script>

 

步骤6：编写长时间运行的脚本

创建如下所示的 JavaScript 'Generate' 函数。

<script type="text/javascript">
function Generate()
{
     $('#divData').html("Generating");
     $('.MyLoading').show();
     var j = 0;

     for (i = 0; i<= parseInt($('#myText').val()); i++)
     {
        j = j+ i;
     }
     $('#divData').html("Result is " + j);
     $('.MyLoading').hide();
}
</script>

在 'Generate' 函数中，按顺序执行以下操作：

  1. 显示“正在生成..”文本
  2. 显示加载图片
  3. 执行逻辑操作（长时间运行的操作 – 添加前 N 个数字）
  4. 显示结果
  5. 隐藏加载图片。

注意：在上面的代码中，

  • $('#divData') - 返回 ID 为 “divData” 的元素
  • html - 函数设置元素的内部 HTML
  • show 和 hide – 显示或隐藏元素。

 

步骤7：按 F5 运行并测试应用程序。

（在您的情况下，您可能需要输入一个很大的数字才能出现错误。）

您会注意到响应中有两点。

  • 在文本框中输入大数字会使页面无响应。
    原因是，每个浏览器内部都定义了一个固定的脚本执行时间间隔。当任何脚本执行时间超过定义的间隔时，就会抛出该错误。
  • 我们期望在点击“Generate”按钮时看到加载图片，但遗憾的是，它也不会发生。在当前情况下，负责执行长时间运行脚本的线程也负责渲染UI。由于线程忙于执行脚本，UI更改不会被渲染，除非脚本执行完成，否则图片不会显示。

 

步骤8：开始使用Web Worker

现在，为了使用Web Worker，我们首先必须将长时间运行的代码移到一个单独的JavaScript文件中。所以创建一个名为 MyWebWorker.js 的新JavaScript文件，并将以下代码放入其中。

var j = 0;
onmessage = function (e)
{ 
};

在上面的代码中，变量 onmessage 是Web Worker提供的全局变量，它将指向一个包含长时间运行脚本的函数。

 

步骤9：将长时间运行的代码移到Web Worker文件

在我们执行此步骤之前，我们必须了解Web Worker的两个限制。

  1. 在Web Worker代码内部，我们不能引用任何DOM元素。
  2. 在Web Worker代码内部，我们不能使用任何第三方库功能，如jQuery。

考虑到以上两个限制后，Web Worker代码将重写如下。

var j = 0;
onmessage = function (e) {
    for (i = 0; i<= e.data; i++) {
        j = j+i;
    }
  postMessage(j);
};

在上面的代码中，调用 postMessage 函数将最终响应发送回调用者。如果您感到困惑，请放松并继续实验，我保证最后会很简单。

 

步骤10：调用Web Worker

打开 WebWorker.html 文件并将 Generate 函数更改如下。

function Generate()
{
    $('#divData').html("Generating");
    $('.MyLoading').show();
    var c = new Worker("MyWebWorker.js");
    c.onmessage = function (e)
    {
        $('#divData').html("Result is " + e.data);
        $('.MyLoading').hide();
    };
    c.postMessage(parseInt($('#myText').val()));
}

正如您所见，我们在此创建了一个 Worker 实例，它是 HTML 5 规范的一部分。它公开了两个主要功能。

  • postMessage 函数，这是一个指示 Worker 在另一个线程中开始工作的信号。它只是调用 Worker 文件中的 onmessage 函数。
  • onMessage 属性，它只是Web Worker提供的一个函数指针。它充当回调函数。一旦Worker线程完成执行，它就会被执行。简单来说，Worker文件中的 postMessage 函数会调用此方法。

步骤11：执行和测试

按 F5 并执行应用程序。

 

让我们来理解完整的代码流程。

 

 

实验23 – Web Worker与Web API

Web API 是一种用于创建基于REST的服务Asp.Net技术。您可以在 此处 了解更多。

您可能想知道这个实验有什么特别之处。

您可能以前已经与REST服务打过交道100次了。

正如您所知，服务是服务器端概念，而HTML和JavaScript是客户端概念。为了从客户端调用服务器端功能，我们使用AJAX。市场上有很多第三方库可以简化Ajax调用。例如 jQuery、Angular 等。

那么问题是什么？问题是，正如我之前所说，Web Worker不允许我们在其中使用任何第三方库。简单来说，我们在 MyWebWorker.js 中不能使用 jQuery 或任何其他库的功能。

 

让我们做一个小实验来理解如何做到这一点。

步骤1：下载Web API

下载本文附带的示例Web API项目。

 

步骤2：执行Web API

在Visual Studio中打开Web API项目，按F5并执行。如上图所示导航到Api。

 

（不同的浏览器可能会以不同的样式显示Web API响应。在IE中，您可能会找到一个下载了带有Json数据的文本文件。）

 

步骤3：调用Web API并返回数据

创建一个新的 MyWebWorker.js 文件，内容如下。

var j = 0;

onmessage = function (e) {

  var a = new XMLHttpRequest();
  a.onreadystatechange = function () {
    if (a.readyState == 4 &&a.status == 200) {
      postMessage(JSON.parse(a.responseText));
     }
  };
  a.open("get", "https://:35871/api/WorkerTest", false);
  a.send();
};

正如您所见，我们没有使用jQuery，而是使用了纯粹的 XmlHttpRequest 对象来执行Ajax请求。

 

步骤4：更改HTML页面

将HTML页面内容更改为以下内容。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
        function GetData() {
            $('#divData').html("Generating");
            $('.MyLoading').show();
            var c = new Worker("MyWebWorker.js");
            c.onmessage = function (e) {
                $('#divData').html("Result is " + e.data.CustomerName + "---" + e.data.Address);
                $('.MyLoading').hide();
            };
c.postMessage(parseInt($('#myText').val()));
        }
</script>
</head>
<body>
<input type="button" name="name" value="Generate" />
</body>
</html>

 

步骤5：执行和测试

按 F5 并执行应用程序。

HTML 5 媒体

在当今的互联网世界中，媒体是一个重要的组成部分。在网页上，您随处可见视频或音频播放。实现这样的功能以前确实是一件很麻烦的事情。我们不得不依赖 object 标签，它内部需要一些第三方播放器，如Flash。当涉及到不支持Flash的设备时，我们就无能为力了。但现在HTML 5通过其新的标准 video 和 audio 标签使其变得容易。

实验14 - 使用video元素

在这个实验中，我们将了解如何使用HTML5中的新 video 元素。

步骤1 – 准备视频

从某个地方下载一个示例视频文件用于演示。如果您愿意，可以从附件的示例中下载。

步骤2 – 创建HTML页面

创建一个名为 Media.html 的新HTML页面，并将以下内容放入其中。

<video controls width="500px" id="vid">
<source src="vid.mp4" />
</video>

您会注意到 video 标签中有一个特殊的属性叫做 “controls”。添加此属性会使播放器中的控制条可见。控制条是一个简单的条，通常在底部可见，包含一些按钮，如“播放”、“暂停”、“停止”等。

注意

  • 请确保视频和HTML文件保存在同一个目录下。如果您希望将它们放在不同的目录下，则需要相应地设置“src”属性。
  • 目前，HTML 5 video 元素仅支持 mp4、webm、3gpp、m4v、mpeg、ogg、quicktime、x-ms-wmv 格式。

输出

这就是您将看到的输出。

实验15：使用video元素进行脚本编写

在这个实验中，我们将尝试使用JavaScript访问视频的播放/暂停/停止等功能。

步骤1：创建HTML页面

创建一个名为 Media01.html 的新HTML页面，或者您也可以使用上一个实验中使用的同一个HTML文件。在src属性中提供视频源。这次我们将不设置 'controls' 属性，因为我们将通过JavaScript来实现。

<video width="500px" id="vid">
<source src="vid.mp4" />
</video>

 

在同一HTML页面上添加3个按钮用于播放、停止、结束，以及一个用于音量控制的 input type range 元素。

添加以下元素。

<input type="button" name="name" value="Play" id="BtnPlay" />
<input type="button" name="name" value="Stop" id="btnStop" />
<input type="button" name="name" value="End" id="btnEnd" />
<input type="range" name="name" value="0.1" min="0" max="1" step="0.1" id="slideVolume" />

 

步骤3：创建用于控制视频的JavaScript函数。以下函数将帮助我们播放和暂停视频。

function PlayOrPause()
{
var v = document.getElementById('vid');
if (v.paused || v.ended)
{
  v.play();
  document.getElementById('BtnPlay').value = "Pause";
}
else
{
  v.pause();
  document.getElementById('BtnPlay').value = "Play";
}
}

 

以下函数将在第6秒停止视频，因为我们将 currentTime 设置为6。

function Stop()
{
  var v = document.getElementById('vid');
  v.pause();
  v.currentTime = 6;
  document.getElementById('BtnPlay').value = "Play";
}

 

以下函数将结束视频，我们将 currentTime 设置为 duration，其中 duration 是视频的总时长。

function End()
{
  var v = document.getElementById('vid');
  v.pause();
  v.currentTime = v.duration;
  document.getElementById('BtnPlay').value = "Play";
}

 

以下函数将视频播放器的音量设置为0到1之间的范围。

function ChangeVolume(element)
{
  var v = document.getElementById('vid');
  v.volume = element.value;//For mute set it to 0
}

 

输出

 

如果您想在页面加载播放器时显示一些默认图片，则设置一个名为 poster 的属性，并提供图像URL。

<video controls width="500px" id="vid" poster="MyPoster.jpg">
<source src="vid.mp4" />
</video>

 

实验16 - Audio元素

与视频一样，在HTML 5之前，音频一直是个问题。我们别无选择，只能依赖 object 标签和第三方库。但现在HTML 5的Audio元素使其变得容易。

HTML5提供了audio元素，可以播放音频。让我们试试。

步骤1：准备音频

从某个地方下载一个示例音频文件用于演示。如果您愿意，可以从附件的示例中下载。

步骤2：创建HTML页面

创建一个名为 Audio.html 的新HTML页面，并将以下内容放入其中。

<audio id="audctrl" controls>
<source src="aud.mp3" type="audio/mp3" />
</audio>

注意

  • 请确保音频和HTML文件保存在同一个目录下。如果您希望将它们放在不同的目录下，则需要相应地设置“src”属性。
  • 目前，HTML 5 audio 元素仅支持 mp3、wav、ogg 格式。

 

输出

实验17：使用Audio元素进行脚本编写

在这个实验中，我们将尝试使用JavaScript访问音频的播放/暂停/停止等功能。

步骤1：创建HTML页面

创建一个名为 Audio01.html 的新HTML页面，或者您也可以使用上一个实验中使用的同一个HTML文件。在src属性中提供音频源。这次我们将不设置 controls 属性，因为我们将通过JavaScript来实现。

<audio id="audctrl">
        <source src="aud.mp3" type="audio/mp3" />
</audio>

 

在同一HTML页面上添加3个按钮用于播放、停止、结束，以及一个用于音量控制的 input type range 元素。

添加以下HTML代码。

<innput type="button" name="name" value="Play" id="BtnPlay" />
<input type="button" name="name" value="Stop" id="btnStop" />
<input type="button" name="name" value="End" id="btnEnd" />
<input type="range" name="name" value="0.1" min="0" max="1" step="0.1" id="slideVolume" />

 

步骤3：创建用于控制音频的JavaScript函数。以下函数将帮助我们播放和暂停音频。

function PlayOrPause()
{
  var v = document.getElementById('audctrl');
  if (v.paused || v.ended)
  {
    v.play();
    document.getElementById('BtnPlay').value = "Pause";
   }
   else
   {
     v.pause();
     document.getElementById('BtnPlay').value = "Play";
   }
}

 

以下函数将在第6秒停止音频，因为我们将 currentTime 设置为6。

function Stop()
{
  var v = document.getElementById('audctrl');
  v.pause();
  v.currentTime = 6;
  document.getElementById('BtnPlay').value = "Play";
}

 

以下函数将结束音频，我们将 currentTime 设置为 duration，其中 duration 是音频的总时长。

function End()
{
  var v = document.getElementById('audctrl');
  v.pause();
  v.currentTime = v.duration;
  document.getElementById('BtnPlay').value = "Play";
}

 

以下函数将音频播放器的音量设置为0到1之间的范围。

function ChangeVolume(element)
{
  varv = document.getElementById('audctrl');
  v.volume = element.value;//For mute set it to 0
}

输出

注意：您将看不到屏幕上的音频播放器。

 

实验18 - 拖放演示

以前，要实现拖放功能，开发者需要编写自己的自定义逻辑或寻求第三方库的帮助。无论哪种情况，代码都不是标准的。一个公司/开发者实现的 सफ़ेद可能与另一个公司/开发者不同。HTML 5通过引入标准的API来实现拖放功能，从而使其更加容易。

让我们做一个小演示，了解如何实现。

步骤1：准备图片

从某个地方下载一个示例图片文件用于演示。如果您愿意，可以从附件的示例中下载。

步骤2：创建HTML文件

创建一个HTML文件，例如 DragDrop.html 文件。将以下HTML内容添加到文件中。

<div class="fish">
        <img src="fish.png" style="width:179px;height:120px;top:200px;" id="img11" />
 </div>
 <div id="div1" class="bowl">
 </div>

从上面的代码中，您可以看到我使用了两个 div，一个包含标签，源为fish，另一个是空的div，将作为目的地。我将为这些div应用一些CSS。所以将以下CSS样式添加到标签中。

<style type="text/css">body {
            cursor: pointer;
        }

        .bowl {
            width: 381px;
            height: 388px;
            left: 300px;
            position: absolute;
            top: 10px;
            text-align: center;
            padding-top: 150px;
            float: left;
            background-image: url('bowl.png');
            background-repeat: no-repeat;
        }

        .fish {
            float: left;
            width: 200px;
            height: 200px;
            top: 200px;
            position: absolute;
        }</style><style>
        body {
            cursor: pointer;
        }

        .bowl {
            width: 381px;
            height: 388px;
            left: 300px;
            position: absolute;
            top: 10px;
            text-align: center;
            padding-top: 150px;
            float: left;
            background-image: url('bowl.png');
            background-repeat: no-repeat;
        }

        .fish {
            float: left;
            width: 200px;
            height: 200px;
            top: 200px;
            position: absolute;
        }
    </style>

步骤3：执行和测试

让我们执行并测试这段代码。

  

看起来不错。现在我们将实现我们的拖放功能。

步骤3：设置 draggable 属性

为 图片标签设置 draggable 属性为 true。

<img src="fish.png" style="width:179px;height:120px;top:200px;" draggable="true" id="img11" />

我设置这个属性是因为我想把这条鱼拖到碗里。

步骤4：完成拖动

任何被拖动的东西都需要被放置在某个容器中，在我们的例子中，放置将发生在 div 中（即 - 碗）。

<div id="div1" class="bowl" ondrop="drop(event)"></div>

在同一个页面上添加以下JavaScript函数。

function drop(ev) {
    ev.target.appendChild(document.getElementById("img11"));
}

我正在实现 onDrop 事件，它将指定在放置时应该发生什么。您可以看到我正在将鱼的图片追加到目标元素，即碗。
当您从拖动的元素上释放鼠标时，onDrop 事件会自动调用。

步骤5：实现 OnDragOver 事件

现在有一个小问题，您仍然无法将鱼拖放进去。原因是，默认情况下，html容器元素不允许任何东西被拖入其中。所以为了放置我的鱼，我们必须覆盖该元素的默认行为。这可以通过调用 ev.preventDefault() 方法来实现。

所以将 onDragOver 事件附加到目标元素，即我们的碗 div，并复制下面的JavaScript函数。

<div id="div1" class="bowl" ondrop="drop(event)" ondragover="allowDrop(event)"></div

复制JavaScript函数。

function allowDrop(e){
   e.preventDefault();
}

 

步骤6：执行和测试

用鼠标选择一条鱼，然后将它拖向碗并放置（释放鼠标）。

输出

                                    

是不是很酷很简单？☻？

 

实验20 - 地理定位

什么是地理定位？

HTML 5中的地理定位API允许您通过网站共享您的位置。经度&纬度可以从JavaScript中捕获，然后发送到服务器，并在Google地图上定位。

它有什么用？

因为它能准确捕捉您的纬度、经度、海拔、速度、时间戳。所以对于获取您所在地的天气、交通或附近的景点等等，它将非常有帮助。

如果它访问我的位置，隐私怎么办？

地理定位API的问题在于，如果用户直接从浏览器被追踪，它可能会破坏安全性。由于这涉及到侵犯用户隐私，除非用户在浏览器中接受，否则无法获取位置。用户可以控制，因为会弹出一个提示框，如下所示。

这专门针对Internet浏览器。对于其他浏览器，弹窗可能会有所不同。它还指明哪个网站希望追踪您的实际位置。您可以决定是否授予访问权限。

注意：此功能仅在最新浏览器中有效，如IE 9+、Chrome 5.0+、Firefox 3.5+以及带有Android 2.0+、IPhone 3.0+的移动设备。

我想知道我访问笔记本电脑的位置的纬度&经度。

让我们做一个小实验来更好地理解它。

初始设置

步骤1：创建一个HTML页面

创建一个名为 Geolocation.html 的HTML页面。

步骤2：在页面上放置一个标签和一个按钮。

复制HTML代码。

<input type="button" value="Get My Location" />
<span id="lblDisplay"></span>

如您所见，我只有一个按钮和< span >元素。我们的目标是在单击按钮时在 span 中显示当前位置。

步骤3：处理按钮点击事件

复制以下JavaScript代码。

JavaScript代码

<script type=”text/Javascript”>
var x = document.getElementById("lblDisplay");

function getLocation() {
  document.getElementById("header").value = "Static Location";
   if (navigator.geolocation) {
   
     navigator.geolocation.getCurrentPosition(showPosition);
   } 
   else {
      alert('No support for geolocation');
   }
}
        
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
            "Longitude: " + position.coords.longitude;
}

</script>

解释

  • 我创建了一个 getLocation() 函数，它将找到我的当前位置。
    首先，这个API可以通过 window.navigator.geolocation 对象访问。由于我们要获取当前位置，所以可以使用 getCurrentPosition() 方法来获取。
    这个方法接受一个参数，即位置回调，在我们的例子中是 showPosition() 方法。这个方法有一个参数，它是一个位置对象。这个参数允许您检索我的位置的纬度和经度。

步骤4：执行和测试

运行网页后，会弹出一个提示框，询问您是否愿意共享您的位置。点击“允许一次”。然后点击“获取我的位置”按钮。

输出

看起来它工作正常。

注意：最好在 Internet Explorer 9+ 中检查输出。

步骤5：处理错误

为了处理错误，我们可以传递 GetPosition 函数的第二个参数，我们之前已经创建了它。

var x = document.getElementById("lblDisplay"); 

function getLocation() { 
   document.getElementById("header").value = "Static Location";
   if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition, errorCallBack); 
   }  
 else { 
    alert('No support for geolocation'); 
 } 
}    

function errorCallBack(e) {
            switch (e) {
                case e.PERMISSION_DENIED:
                    x.innerHTML = "User denied geolocation request";
                    break;
                case e.POSITION_UNAVAILABLE:
                    x.innerHTML = "No position information available";
                    break;
                case e.TIMEOUT:
                    x.innerHTML = "Timeout occured";
                    break;
                case e.UNKNOWN_ERROR:
                    x.innerHTML = "Unknown error";
                    break;
            }
        }

如您所见，第二个参数是一个回调函数，它将在发生错误时调用。

解释:

getCurrentPosition() 方法的第二个可选参数是 PositionError 回调，即 errorCallBack()。这个方法有一个参数，它是一个 PositionError 对象。如果您在上面的代码片段中看到，我写了一个 case 来处理每种类型的错误。
 

当位置更改时如何自动更新位置？

初始设置

步骤1：在页面上放置一个按钮和一个标签。

<input type="button" value="Get My Location Updated" />

步骤2：编写一个JavaScript函数。

varwatchid;
function getUpdatedLocation() {
  document.getElementById("header").value = "Dynamic Location";
  if (navigator.geolocation) {
    watchid = navigator.geolocation.watchPosition(showPosition, errorCallBack);
  } 
  else {
                // no native support; maybe try a fallback?
  }
}

解释

navigator.geolocation.watchPosition()：此方法返回当前位置，并持续监听地理位置，根据用户的移动更新位置。它类似于您的GPS系统。

步骤3：执行和测试

要测试您的输出，请从一个位置单击按钮，然后将笔记本电脑移动到另一个位置。您将在屏幕上看到更新的纬度和经度。这是因为 navigator.geolocation.watchPosition() 方法会持续跟踪纬度和经度的变化。

 

实验21 - 结合Google地图的地理定位

我们可以用地理定位做的另一件有趣的事情是，我们可以在地图上显示结果。为了实现这一点，我们需要访问一些地图服务，如Google Maps。

我将使用地理定位API来获取位置，并将坐标映射到Google地图，以获取某个地方的路线。

初始设置

步骤1：创建一个HTML页面

创建一个名为 Geolocation2.html 的HTML页面。

步骤2：添加Google地图API

在HTML文件的 head 部分添加Google地图API JavaScript文件的引用。

<script src="http://maps.google.se/maps/api/js?sensor=false"></script>

步骤3：添加HTML内容

添加一个 div 元素来加载地图，一个按钮和一个用于输入目的地的文本框。点击按钮后，我们将加载地图，显示从我的当前位置到目的地的路线。

<div id="divmap" style="border:1px solid #ffd800;width:400px;height:400px;"></div>
<input type="text" id="txtDestination" value="Delhi" /> 
<input type="button" value="Get Direction" />

步骤4：处理按钮点击事件

在按钮的点击事件中添加一个名为 GetMyDirection() 的JavaScript函数并调用它。复制以下JavaScript代码。

<script type="text/javascript">

function GetMyDirection() {
      if (navigator.geolocation) {

       navigator.geolocation.getCurrentPosition(showPosition, errorCallBack);
      } 
      else {
          alert('No support for geolocation');            
      }
}

function showPosition(position) {
  showInMap(position.coords.latitude, position.coords.longitude);
}

function showInMap(lat, lang) {

  vardirectionsService = new google.maps.DirectionsService();
  vardirectionsRenderer = new google.maps.DirectionsRenderer();

  var route = {
                origin: new google.maps.LatLng(lat, lang),
                destination: document.getElementById('txtDestination').value, travelMode: google.maps.DirectionsTravelMode.DRIVING
   };

 varmapOptions = {
                zoom: 10,
                center: new google.maps.LatLng(50.8504500, 4.3487800),mapTypeId: google.maps.MapTypeId.ROADMAP
 };

  var map = new google.maps.Map(document.getElementById("divmap"), mapOptions);
  directionsRenderer.setMap(map);
  directionsRenderer.setPanel(document.getElementById("divDriveDirection"));
  directionsService.route(route, function (result, status) {
  if (status === google.maps.DirectionsStatus.OK) {
      directionsRenderer.setDirections(result);
  }
  });
}

function errorCallBack(e) {
            switch (e) {
                case e.PERMISSION_DENIED:
                x.innerHTML = "User denied geolocation request";
                    break;
                case e.POSITION_UNAVAILABLE:
                x.innerHTML = "No position information available";
                    break;
                case e.TIMEOUT:
                x.innerHTML = "Timeout occured";
                    break;
                case e.UNKNOWN_ERROR:
                 x.innerHTML = "Unknown error";
                    break;
            }
}
</script>

解释

在 navigator.geolocation.getCurrentPosition() 的回调方法，即 showPosition() 中，我们调用了另一个方法，它将帮助我们在Google地图上显示经度和纬度。

  • 创建一个Google地图方向服务的对象。
vardirectionsService = new google.maps.DirectionsService();
  • 创建一个Google方向渲染器的对象，它将帮助在Google地图上渲染方向。
vardirectionsRenderer = new google.maps.DirectionsRenderer();
  • 设置一些路线选项。
var route = {
             origin: new google.maps.LatLng(lat, long),
             destination: document.getElementById('txtDestination').value;              
             travelMode: google.maps.DirectionsTravelMode.DRIVING
         };

origin – 起点是我的位置，所以使用Google地图的 LatLng() 方法设置。

destination – 文本框中输入的任何内容，例如 – 北京。

travelMode – 指定旅行模式。

  • 设置一些地图选项。
varmapOptions = {
                zoom: 30,
                center: new google.maps.LatLng(20, 77),
                mapTypeId: google.maps.MapTypeId.ROADMAP
         };

zoom – 指定默认缩放级别。

center – 指定地图的中心点。

maptypeId – 由于我们选择了 DRIVING，所以显示道路作为类型。

  • 最后创建一个地图。
var map = new google.maps.Map(document.getElementById("divmap"), mapOptions);
directionsRenderer.setMap(map);   
directionsService.route(route, function (result, status) {
      if (status === google.maps.DirectionsStatus.OK) {
           directionsRenderer.setDirections(result);
      }
});

 

  • 使用以下行显示关于从起点到目的地的路线和方向的所有详细信息。
directionsRenderer.setPanel(document.getElementById("divDriveDirection"));

步骤5：执行和测试

在文本框中输入一个位置，然后单击按钮。

输出

您将看到方向显示在地图上，以及到达指定目的地的路线详情。

让我们一起嗨皮吧！

希望您享受第2天。请继续关注第3天。别忘了以评论的形式留下您的想法和建议。您的建议对我们很有价值。

如果您有任何培训需求，请随时通过 SukeshMarla@Gmail.com 和 Pradeepsh824@gmail.com 与我们联系。

通过在 Twitter 或 Facebook 上关注我，随时了解最新动态。

© . All rights reserved.