Html5 获取当前坐标位置，并在高德地图中显示

在HTML5中获取当前位置并在高德地图中显示，您可以使用HTML5的Geolocation API来获取当前位置，然后使用高德地图API将其显示在地图上。以下是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML5 Geolocation and AMap Example</title>
  <style>
    #map {
      width: 100%;
      height: 400px;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德地图API Key"></script>
  <script>
    // 获取当前位置
    navigator.geolocation.getCurrentPosition(function(position) {
      var lat = position.coords.latitude;
      var lng = position.coords.longitude;
      
      // 在地图上显示当前位置
      var map = new AMap.Map('map', {
        center: [lng, lat],
        zoom: 13
      });
      var marker = new AMap.Marker({
        position: [lng, lat],
        map: map
      });
    });
  </script>
</body>
</html>

Html5中，可以使用JavaScript的Geolocation API来获取当前位置的坐标。该API提供了getCurrentPosition()和watchPosition()两个关键函数来获取位置信息：
getCurrentPosition()函数用于获取当前位置的坐标，它接受三个参数：成功回调函数、失败回调函数和选项对象。成功回调函数将在获取位置信息成功时被调用，并将位置信息作为参数传递给它。失败回调函数将在获取位置信息失败时被调用，并将错误信息作为参数传递给它。选项对象用于指定获取位置信息的一些选项，例如超时时间和精度等。
watchPosition()函数用于持续获取位置信息，它也接受三个参数：成功回调函数、失败回调函数和选项对象。成功回调函数将在每次获取位置信息成功时被调用，并将位置信息作为参数传递给它。失败回调函数将在获取位置信息失败时被调用，并将错误信息作为参数传递给它。选项对象用于指定获取位置信息的一些选项，例如超时时间和精度等。（以后慢慢研究）

另外需要注意，需要将上述代码中的“您的高德地图API Key”替换为您自己的高德地图API密钥。此外， navigator.geolocation 方法检测浏览器是否支持地理定位，并且还需要确保在使用Geolocation API时，浏览器已启用了位置服务。

多小朋友喜欢用笔在纸上画线进行走迷宫游戏。

比如下图这种迷宫：从标注了S（Start-起点）的位置出发，走到终点E（End）就算成功。

那么，如何随机生成上图这种迷宫地图呢？

我在github上部署了一个迷宫地图生成应用：http://i042416.github.io/FioriODataTestTool2014/WebContent/027_generator.html

每次进入这个应用或者按F5刷新，就会随机生成一张新的迷宫地图：

这个应用仅仅需要使用到两个JavaScript脚本文件和一个html文件。

html文件的源代码：

<!doctype html>

<html>

<head>

</script>

<style>

#toolbar {

position: absolute;

padding:2px;

top:0;

right:0;

width:180px;

}

#toolbar button {

padding:10px;

font-size:16px;

margin:5px;

}

</style>

</head>

<body>

</div>

</body>

</html>

迷宫的轮廓模型生成逻辑位于代码Maze.js里：

"use strict";

var Maze = function(options) {

for (var p in options) {

this[p] = options[p];

}

面上大多数的热点地图，都是以 JavaScript 来做的，但是使用 CSS3 制作的热点地图倒还真的挺少见的。

其实 CSS3 的功能也很强大，能帮助我们实现很多用 JavaScript 实现的效果，最近小编刚学会 HTML5 和简单的 CSS3，在这里用 CSS3 实现了热点地图动画，效果如下：

CSS3 实现热点地图动画

下面给大家初步讲讲，如何用 CSS3 制作一个热点地图，你可以学到 HTML 的布局、HTML 列表、CSS 选择器、CSS3 动画、CSS3 的 2D 转换等，对于练习 HTML、CSS 也有很好的帮助。

知识点

HTML 列表
CSS 相对定位与绝对定位
CSS3 动画
CSS3 transform 属性
CSS3 animation-delay () 属性

相关代码下载命令：

点击文末阅读原文，获取完整代码。

HTML 基础结构

首先我们来创建如下目录结构：

在 img 目录下获取地图图片，打开终端，执行以下命令：

$ cd img$ wget https://labfile.oss.aliyuncs.com/courses/2673/map_black_bg.png

在 index.html 文件中写入如下代码：

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>热点地图</title>    <!-- 引入CSS -->    <link rel="stylesheet" href="./index.css" />  </head>  <body>    <!-- 地图 -->    <div class="china-map"></div>  </body></html>

为了让我们的城市能够显示在地图上，在这里我选择使用 CSS 相对定位与绝对定位的方式。

在 index.css 文件中写入如下代码：

/* CSS 通配符 * 号，表示所有的元素一开始默认的内外边距为 0 */* {  margin: 0;  padding: 0;}body {  /* 背景色 */  background: #31363a;}.china-map {  /* 给地图加上相对定位 */  position: relative;  /* 给地图设置宽高 */  width: 747px;  height: 617px;  /* 设置背景图片，指定为不重复，并且居中 */  background: url("./map_black_bg.png") no-repeat center;  /* 将地图设置为离顶部60px，左右居中 */  margin: 60px auto 0;}

执行如下步骤预览效果：

这下我们的地图就显示出来了。

地点样式设置

地图成功显示后，我们需要在上面设置地点以及地点的样式。

在 index.html 中加入以下代码：

<div class="china-map">  <!-- 地点区域 -->  <div class="region">    <!-- 地点显示的小圆点 -->    <div class="dot"></div>    <!-- 向外扩散的圆圈 -->    <div class="place"></div>    <!-- 地名 -->    <div class="txt">青海</div>  </div></div>

在 index.css 中加入以下代码：

* {  margin: 0;  padding: 0;}body {  background: #31363a;}/* 地图 */.china-map {  position: relative;  width: 747px;  height: 617px;  background: url("./map_black_bg.png") no-repeat center;  margin: 60px auto 0;}/* 区域地点 */.region {  /* 绝对定位 */  position: absolute;}/* 小圆点 */.region .dot {  position: absolute;  top: 50%;  left: 50%;  margin: -5px 0 0 -5px;  width: 10px;  height: 10px;  background: #a2a9b4;  opacity: 1;  border-radius: 50%;}/* 向外扩散的圆圈 */.region .place {  position: absolute;  top: 50%;  left: 50%;  margin: -33px 0 0 -33px;  width: 66px;  height: 66px;  border: 2px solid #b7b7b7;  border-radius: 50%;  /* 透明度 */  opacity: 0.12;  /* 阴影 */  box-shadow: 0 0 4px #82878f inset;}/* 地名 */.region .txt {  position: absolute;  top: -20px;  left: 10px;  font-size: 14px;  color: #ccc;  width: 50px;}

预览效果：

如何将这个地点放置在相应位置上呢？这个时候就要使用 left 属性和 top 属性了，通过计算正确的偏移值，将地点放置在合适的位置上。

修改 .region 的样式：

.region {  position: absolute;  top: 302px;  left: 308px;}

预览效果：

青海就已经显示在正确的地方上了。但是我们转念一想，如果我们还有一个城市，比如北京，这个时候是不是该这样：

.region2 {  position: absolute;  top: 229px;  left: 559px;}

不过如此一来，每当创建一个城市，就要新写一个 CSS 类，并且每一个类中都会有同样的代码 position:absolute，如果大篇幅的重复会增加代码的冗余度。所以这个时候，我们可以专门新建一个类来放置每一个城市的偏移值，修改 index.css 文件，增加如下代码：

.region {  position: absolute;}/* 青海 */.region-qh {  top: 302px;  left: 308px;}/* 北京 */.region-bj {  top: 229px;  left: 559px;}

修改 index.html：

<div class="china-map">  <!-- 青海 -->  <div class="region region-qh">    <div class="dot"></div>    <div class="place"></div>    <div class="txt">青海</div>  </div>  <!-- 北京 -->  <div class="region region-bj">    <div class="dot"></div>    <div class="place"></div>    <div class="txt">北京</div>  </div></div>

预览效果：

同样的道理，如果我们想设置不同地点有不同颜色的显示，我们可以专门新建一个颜色类：

修改 index.html：

<!-- 北京 --><div class="region region-bj blue">  <div class="dot"></div>  <div class="place"></div>  <div class="txt">北京</div></div>

在 index.css 中加入以下代码：

/* 颜色*/.region.blue .place {  width: 120px;  height: 120px;  margin: -64px 0 0 -64px;  border: 1px solid #009fd9;  box-shadow: 0 0 12px #009fd9 inset;}.region.blue .dot {  background: #0080d9;}

预览效果：

如此一来，如果我们想给一些地点加上样式，只需要为它加上像 .blue 这样的颜色类就好了。现在我们将其他的地点以及样式增加上去。

小编学习的这个《CSS3 实现热点地图动画》课程，目前正在限时免费中，感兴趣的小伙伴赶紧点击了解更多，进行学习吧！

说不定做出来的地图比小编的更好看~

点击了解更多，学习完整课程内容～

在线咨询

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Html5 获取当前坐标位置，并在高德地图中显示

知识点

HTML 基础结构

地点样式设置

您的项目需求