整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
在HTML5中獲取當(dāng)前位置并在高德地圖中顯示，您可以使用HTML5的Geolocation API來(lái)獲取當(dāng)前位置，然后使用高德地圖API將其顯示在地圖上。以下是一個(gè)簡(jiǎn)單的示例代碼：
<!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>
// 獲取當(dāng)前位置
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
// 在地圖上顯示當(dāng)前位置
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來(lái)獲取當(dāng)前位置的坐標(biāo)。該API提供了getCurrentPosition()和watchPosition()兩個(gè)關(guān)鍵函數(shù)來(lái)獲取位置信息：
getCurrentPosition()函數(shù)用于獲取當(dāng)前位置的坐標(biāo)，它接受三個(gè)參數(shù)：成功回調(diào)函數(shù)、失敗回調(diào)函數(shù)和選項(xiàng)對(duì)象。成功回調(diào)函數(shù)將在獲取位置信息成功時(shí)被調(diào)用，并將位置信息作為參數(shù)傳遞給它。失敗回調(diào)函數(shù)將在獲取位置信息失敗時(shí)被調(diào)用，并將錯(cuò)誤信息作為參數(shù)傳遞給它。選項(xiàng)對(duì)象用于指定獲取位置信息的一些選項(xiàng)，例如超時(shí)時(shí)間和精度等。
watchPosition()函數(shù)用于持續(xù)獲取位置信息，它也接受三個(gè)參數(shù)：成功回調(diào)函數(shù)、失敗回調(diào)函數(shù)和選項(xiàng)對(duì)象。成功回調(diào)函數(shù)將在每次獲取位置信息成功時(shí)被調(diào)用，并將位置信息作為參數(shù)傳遞給它。失敗回調(diào)函數(shù)將在獲取位置信息失敗時(shí)被調(diào)用，并將錯(cuò)誤信息作為參數(shù)傳遞給它。選項(xiàng)對(duì)象用于指定獲取位置信息的一些選項(xiàng)，例如超時(shí)時(shí)間和精度等。（以后慢慢研究）
另外需要注意，需要將上述代碼中的“您的高德地圖API Key”替換為您自己的高德地圖API密鑰。此外， navigator.geolocation 方法檢測(cè)瀏覽器是否支持地理定位，并且還需要確保在使用Geolocation API時(shí)，瀏覽器已啟用了位置服務(wù)。
多小朋友喜歡用筆在紙上畫(huà)線進(jìn)行走迷宮游戲。
比如下圖這種迷宮：從標(biāo)注了S（Start-起點(diǎn)）的位置出發(fā)，走到終點(diǎn)E（End）就算成功。
那么，如何隨機(jī)生成上圖這種迷宮地圖呢？
我在github上部署了一個(gè)迷宮地圖生成應(yīng)用：http://i042416.github.io/FioriODataTestTool2014/WebContent/027_generator.html
每次進(jìn)入這個(gè)應(yīng)用或者按F5刷新，就會(huì)隨機(jī)生成一張新的迷宮地圖：
這個(gè)應(yīng)用僅僅需要使用到兩個(gè)JavaScript腳本文件和一個(gè)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ù)的熱點(diǎn)地圖，都是以 JavaScript 來(lái)做的，但是使用 CSS3 制作的熱點(diǎn)地圖倒還真的挺少見(jiàn)的。
其實(shí) CSS3 的功能也很強(qiáng)大，能幫助我們實(shí)現(xiàn)很多用 JavaScript 實(shí)現(xiàn)的效果，最近小編剛學(xué)會(huì) HTML5 和 簡(jiǎn)單的 CSS3，在這里用 CSS3 實(shí)現(xiàn)了熱點(diǎn)地圖動(dòng)畫(huà)，效果如下：
CSS3 實(shí)現(xiàn)熱點(diǎn)地圖動(dòng)畫(huà)
下面給大家初步講講，如何用 CSS3 制作一個(gè)熱點(diǎn)地圖，你可以學(xué)到 HTML 的布局、HTML 列表、CSS 選擇器、CSS3 動(dòng)畫(huà)、CSS3 的 2D 轉(zhuǎn)換等，對(duì)于練習(xí) HTML、CSS 也有很好的幫助。
相關(guān)代碼下載命令：
點(diǎn)擊文末閱讀原文，獲取完整代碼。
首先我們來(lái)創(chuàng)建如下目錄結(jié)構(gòu)：
在 img 目錄下獲取地圖圖片，打開(kāi)終端，執(zhí)行以下命令：
$ cd img$ wget https://labfile.oss.aliyuncs.com/courses/2673/map_black_bg.png在 index.html 文件中寫(xiě)入如下代碼：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>熱點(diǎn)地圖</title> <!-- 引入CSS --> <link rel="stylesheet" href="./index.css" /> </head> <body> <!-- 地圖 --> <div class="china-map"></div> </body></html>為了讓我們的城市能夠顯示在地圖上，在這里我選擇使用 CSS 相對(duì)定位與絕對(duì)定位的方式。
在 index.css 文件中寫(xiě)入如下代碼：
/* CSS 通配符 * 號(hào)，表示所有的元素一開(kāi)始默認(rèn)的內(nèi)外邊距為 0 */* { margin: 0; padding: 0;}body { /* 背景色 */ background: #31363a;}.china-map { /* 給地圖加上相對(duì)定位 */ position: relative; /* 給地圖設(shè)置寬高 */ width: 747px; height: 617px; /* 設(shè)置背景圖片，指定為不重復(fù)，并且居中 */ background: url("./map_black_bg.png") no-repeat center; /* 將地圖設(shè)置為離頂部60px，左右居中 */ margin: 60px auto 0;}執(zhí)行如下步驟預(yù)覽效果：
這下我們的地圖就顯示出來(lái)了。
地圖成功顯示后，我們需要在上面設(shè)置地點(diǎn)以及地點(diǎn)的樣式。
在 index.html 中加入以下代碼：
<div class="china-map"> <!-- 地點(diǎn)區(qū)域 --> <div class="region"> <!-- 地點(diǎn)顯示的小圓點(diǎn) --> <div class="dot"></div> <!-- 向外擴(kuò)散的圓圈 --> <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ū)域地點(diǎn) */.region { /* 絕對(duì)定位 */ position: absolute;}/* 小圓點(diǎn) */.region .dot { position: absolute; top: 50%; left: 50%; margin: -5px 0 0 -5px; width: 10px; height: 10px; background: #a2a9b4; opacity: 1; border-radius: 50%;}/* 向外擴(kuò)散的圓圈 */.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ù)覽效果：
如何將這個(gè)地點(diǎn)放置在相應(yīng)位置上呢？這個(gè)時(shí)候就要使用 left 屬性和 top 屬性了，通過(guò)計(jì)算正確的偏移值，將地點(diǎn)放置在合適的位置上。
修改 .region 的樣式：
.region { position: absolute; top: 302px; left: 308px;}預(yù)覽效果：
青海就已經(jīng)顯示在正確的地方上了。但是我們轉(zhuǎn)念一想，如果我們還有一個(gè)城市，比如北京，這個(gè)時(shí)候是不是該這樣：
.region2 { position: absolute; top: 229px; left: 559px;}不過(guò)如此一來(lái)，每當(dāng)創(chuàng)建一個(gè)城市，就要新寫(xiě)一個(gè) CSS 類(lèi)，并且每一個(gè)類(lèi)中都會(huì)有同樣的代碼 position:absolute，如果大篇幅的重復(fù)會(huì)增加代碼的冗余度。所以這個(gè)時(shí)候，我們可以專(zhuān)門(mén)新建一個(gè)類(lèi)來(lái)放置每一個(gè)城市的偏移值，修改 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è)置不同地點(diǎn)有不同顏色的顯示，我們可以專(zhuān)門(mén)新建一個(gè)顏色類(lèi)：
修改 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ù)覽效果：
如此一來(lái)，如果我們想給一些地點(diǎn)加上樣式，只需要為它加上像 .blue 這樣的顏色類(lèi)就好了。現(xiàn)在我們將其他的地點(diǎn)以及樣式增加上去。
小編學(xué)習(xí)的這個(gè)《CSS3 實(shí)現(xiàn)熱點(diǎn)地圖動(dòng)畫(huà)》課程，目前正在限時(shí)免費(fèi)中，感興趣的小伙伴趕緊點(diǎn)擊了解更多，進(jìn)行學(xué)習(xí)吧！
說(shuō)不定做出來(lái)的地圖比小編的更好看~
點(diǎn)擊了解更多，學(xué)習(xí)完整課程內(nèi)容～
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
