整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
在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()兩個關(guān)鍵函數(shù)來獲取位置信息：
getCurrentPosition()函數(shù)用于獲取當前位置的坐標，它接受三個參數(shù)：成功回調(diào)函數(shù)、失敗回調(diào)函數(shù)和選項對象。成功回調(diào)函數(shù)將在獲取位置信息成功時被調(diào)用，并將位置信息作為參數(shù)傳遞給它。失敗回調(diào)函數(shù)將在獲取位置信息失敗時被調(diào)用，并將錯誤信息作為參數(shù)傳遞給它。選項對象用于指定獲取位置信息的一些選項，例如超時時間和精度等。
watchPosition()函數(shù)用于持續(xù)獲取位置信息，它也接受三個參數(shù)：成功回調(diào)函數(shù)、失敗回調(diào)函數(shù)和選項對象。成功回調(diào)函數(shù)將在每次獲取位置信息成功時被調(diào)用，并將位置信息作為參數(shù)傳遞給它。失敗回調(diào)函數(shù)將在獲取位置信息失敗時被調(diào)用，并將錯誤信息作為參數(shù)傳遞給它。選項對象用于指定獲取位置信息的一些選項，例如超時時間和精度等。（以后慢慢研究）
另外需要注意，需要將上述代碼中的“您的高德地圖API Key”替換為您自己的高德地圖API密鑰。此外， navigator.geolocation 方法檢測瀏覽器是否支持地理定位，并且還需要確保在使用Geolocation API時，瀏覽器已啟用了位置服務(wù)。
多小朋友喜歡用筆在紙上畫線進行走迷宮游戲。
比如下圖這種迷宮：從標注了S（Start-起點）的位置出發(fā)，走到終點E（End）就算成功。
那么，如何隨機生成上圖這種迷宮地圖呢？
我在github上部署了一個迷宮地圖生成應(yīng)用：http://i042416.github.io/FioriODataTestTool2014/WebContent/027_generator.html
每次進入這個應(yīng)用或者按F5刷新，就會隨機生成一張新的迷宮地圖：
這個應(yīng)用僅僅需要使用到兩個JavaScript腳本文件和一個html文件。
html文件的源代碼：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta charset="utf-8">
<title>Maze Demo</title>
<!-- <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-title" content="H5Game">
<meta name="apple-touch-fullscreen" content="yes" >
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name='format-detection' content='telephone=no'>
<meta name="screen-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="360-fullscreen" content="true">
<script type="text/javascript" src="maze//Maze.js"></script>
<script type="text/javascript" src="maze/main.js"></script>
<script type="text/javascript">
</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 id="container" class="splash">
<canvas id="canvas"></canvas>
<div id="info"></div>
</div>
</body>
</html>
迷宮的輪廓模型生成邏輯位于代碼Maze.js里：
"use strict";
var Maze = function(options) {
for (var p in options) {
this[p] = options[p];
}
}
面上大多數(shù)的熱點地圖，都是以 JavaScript 來做的，但是使用 CSS3 制作的熱點地圖倒還真的挺少見的。
其實 CSS3 的功能也很強大，能幫助我們實現(xiàn)很多用 JavaScript 實現(xiàn)的效果，最近小編剛學會 HTML5 和 簡單的 CSS3，在這里用 CSS3 實現(xiàn)了熱點地圖動畫，效果如下：
CSS3 實現(xiàn)熱點地圖動畫
下面給大家初步講講，如何用 CSS3 制作一個熱點地圖，你可以學到 HTML 的布局、HTML 列表、CSS 選擇器、CSS3 動畫、CSS3 的 2D 轉(zhuǎn)換等，對于練習 HTML、CSS 也有很好的幫助。
相關(guān)代碼下載命令：
點擊文末閱讀原文，獲取完整代碼。
首先我們來創(chuàng)建如下目錄結(jié)構(gòu)：
在 img 目錄下獲取地圖圖片，打開終端，執(zhí)行以下命令：
$ 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 通配符 * 號，表示所有的元素一開始默認的內(nèi)外邊距為 0 */* { margin: 0; padding: 0;}body { /* 背景色 */ background: #31363a;}.china-map { /* 給地圖加上相對定位 */ position: relative; /* 給地圖設(shè)置寬高 */ width: 747px; height: 617px; /* 設(shè)置背景圖片，指定為不重復，并且居中 */ background: url("./map_black_bg.png") no-repeat center; /* 將地圖設(shè)置為離頂部60px，左右居中 */ margin: 60px auto 0;}執(zhí)行如下步驟預(yù)覽效果：
這下我們的地圖就顯示出來了。
地圖成功顯示后，我們需要在上面設(shè)置地點以及地點的樣式。
在 index.html 中加入以下代碼：
<div class="china-map"> <!-- 地點區(qū)域 --> <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;}/* 區(qū)域地點 */.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;}預(yù)覽效果：
如何將這個地點放置在相應(yīng)位置上呢？這個時候就要使用 left 屬性和 top 屬性了，通過計算正確的偏移值，將地點放置在合適的位置上。
修改 .region 的樣式：
.region { position: absolute; top: 302px; left: 308px;}預(yù)覽效果：
青海就已經(jīng)顯示在正確的地方上了。但是我們轉(zhuǎn)念一想，如果我們還有一個城市，比如北京，這個時候是不是該這樣：
.region2 { position: absolute; top: 229px; left: 559px;}不過如此一來，每當創(chuàng)建一個城市，就要新寫一個 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>預(yù)覽效果：
同樣的道理，如果我們想設(shè)置不同地點有不同顏色的顯示，我們可以專門新建一個顏色類：
修改 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;}預(yù)覽效果：
如此一來，如果我們想給一些地點加上樣式，只需要為它加上像 .blue 這樣的顏色類就好了。現(xiàn)在我們將其他的地點以及樣式增加上去。
小編學習的這個《CSS3 實現(xiàn)熱點地圖動畫》課程，目前正在限時免費中，感興趣的小伙伴趕緊點擊了解更多，進行學習吧！
說不定做出來的地圖比小編的更好看~
點擊了解更多，學習完整課程內(nèi)容～
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
