如何做一個(gè)簡單的網(wǎng)頁版地圖
時(shí)間：2023-05-18 16:21:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-05-18 16:21:02 來源：網(wǎng)站運(yùn)營
如何做一個(gè)簡單的網(wǎng)頁版地圖：前言
以前做了一個(gè)安卓版的地圖應(yīng)用，現(xiàn)在突然想做一個(gè)簡單的網(wǎng)頁版地圖。這個(gè)簡單的網(wǎng)頁版地圖能根據(jù)城市名進(jìn)行位置查詢（有個(gè)城市列表的小控件，支持城市列表選擇），還能根據(jù)經(jīng)緯度進(jìn)行位置查詢。當(dāng)你進(jìn)行城市搜索時(shí)，或者經(jīng)緯度查詢城市時(shí)，該小控件也能自由地切換到目標(biāo)城市。
一、申請地圖的AK密鑰
1、首先找到一個(gè)地圖開放平臺(tái)，這里以百度地圖開放平臺(tái)為例，步驟如下：進(jìn)入百度地圖開放平臺(tái)，拉到最底下，進(jìn)行登錄注冊，然后進(jìn)入應(yīng)用管理，點(diǎn)擊創(chuàng)建應(yīng)用。
2、“應(yīng)用名稱”可以自己隨意編輯，既然是百度地圖，建議大家就寫“地圖”，應(yīng)用類型因?yàn)樽龅氖蔷W(wǎng)頁版的地圖，所以選擇瀏覽器端，啟用服務(wù)默認(rèn)就行
3、“IP白名單”處建議大家就填*，方便在不同的電腦上操作（百度地圖官方不推薦）
4、點(diǎn)擊“提交”，提交之后會(huì)出現(xiàn)如下網(wǎng)頁，訪問應(yīng)用（AK）處會(huì)出現(xiàn)一串?dāng)?shù)字字母代碼。這個(gè)就是我們要的AK密匙了，把它再粘貼到自己創(chuàng)建的網(wǎng)頁版地圖代碼中去就好了
二、主要代碼分析
1、設(shè)置鼠標(biāo)滾輪縮放，可以自由地縮小或者擴(kuò)大自己的地圖
map.enableScrollWheelZoom(true);
2、根據(jù)城市名稱進(jìn)行位置查詢
function theLocation1() {
var city = document.getElementById("cityName").value;
if (city != "") {
// 用城市名設(shè)置地圖中心點(diǎn)
map.centerAndZoom(city, 11);
}
}
3、根據(jù)經(jīng)緯度進(jìn)行位置查詢
function theLocation2() {
if (document.getElementById("lng").value != "" && document.getElementById("lat").value != "") {
map.clearOverlays();
var new_point = new BMapGL.Point(document.getElementById("lng").value, document.getElementById("lat").value);
// 創(chuàng)建標(biāo)注
var marker = new BMapGL.Marker(new_point);
// 將標(biāo)注添加到地圖中
map.addOverlay(marker);
map.panTo(new_point);
}
}
4、創(chuàng)建城市選擇控件
var cityControl = new BMapGL.CityListControl({
// 控件的?？课恢茫蛇x，默認(rèn)左上角）
anchor: BMAP_ANCHOR_TOP_LEFT,
// 控件基于?？课恢玫钠屏浚蛇x）
offset: new BMapGL.Size(10, 5)
});
// 將控件添加到地圖上
map.addControl(cityControl);
三、全部代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密鑰"></script>
<title>我的地圖</title>
<style>
html, body, #allmap {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#result {
padding: 7px 10px;
position: fixed;
top: 5px;
right: 0;
left: 0;
margin: auto;
width: fit-content;
background: #fff;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
border-radius: 7px;
z-index: 99;
}
#result input {
width: 100px;
margin-right: 10px;
height: 20px;
border: 1px solid rgba(27, 142, 236, 0.5);
border-radius: 5px;
}
#result button {
margin-right: 15px;
border: 1px solid rgba(27, 142, 236, 0.5);
border-radius: 5px;
background: rgba(27, 142, 236, 0.5);
color: #fff
}
</style>
</head>
<body>
<div id='allmap'></div>
<div id='result'>
城市名: <input id="cityName" type="text"/>
<button onclick="theLocation1()"/>
查詢</button>
經(jīng)度: <input id="lng" type="text"/>
緯度: <input id="lat" type="text"/>
<button onclick="theLocation2()"/>
查詢</button>
</div>
<script>
// 百度地圖API功能
var map = new BMapGL.Map("allmap");
var point = new BMapGL.Point(116.331398, 39.897445);
map.centerAndZoom(point, 11);
//設(shè)置鼠標(biāo)滾輪縮放
map.enableScrollWheelZoom(true);
//根據(jù)城市名稱進(jìn)行地圖查詢
function theLocation1() {
var city = document.getElementById("cityName").value;
if (city != "") {
// 用城市名設(shè)置地圖中心點(diǎn)
map.centerAndZoom(city, 11);
}
}
// 根據(jù)經(jīng)緯度進(jìn)行地圖查詢
function theLocation2() {
if (document.getElementById("lng").value != "" && document.getElementById("lat").value != "") {
map.clearOverlays();
var new_point = new BMapGL.Point(document.getElementById("lng").value, document.getElementById("lat").value);
// 創(chuàng)建標(biāo)注
var marker = new BMapGL.Marker(new_point);
// 將標(biāo)注添加到地圖中
map.addOverlay(marker);
map.panTo(new_point);
}
}
// 創(chuàng)建城市選擇控件
var cityControl = new BMapGL.CityListControl({
// 控件的?？课恢茫蛇x，默認(rèn)左上角）
anchor: BMAP_ANCHOR_TOP_LEFT,
// 控件基于?？课恢玫钠屏浚蛇x）
offset: new BMapGL.Size(10, 5)
});
// 將控件添加到地圖上
map.addControl(cityControl);
</script>
</body>
</html>
四、結(jié)果展示
1、主界面包含城市名查詢、經(jīng)緯度查詢以及下拉選擇城市等
2、根據(jù)城市查詢位置，可以看見城市選擇控件也發(fā)生改變
3、根據(jù)經(jīng)緯度查詢位置 ，隨便輸入一個(gè)經(jīng)緯度坐標(biāo)，可以看見城市選擇控件也發(fā)生改變
4、下拉城市選擇
————————————————
版權(quán)聲明：本文為CSDN博主「全村第二帥」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：如何做一個(gè)簡單的網(wǎng)頁版地圖_全村第二帥的博客-CSDN博客_網(wǎng)頁地圖
在線咨詢