一、百度地圖–作者前言
這篇文章主要想讓讀者掌握：
百度地圖官網(wǎng) API
百度地圖JavaScript API
當(dāng)前的位置在網(wǎng)頁中顯示，插入地圖 拖拽 點擊事件。
應(yīng)用場景：網(wǎng)頁插入百度地圖
注意：不關(guān)注定位、距離、公交，這些功能一般結(jié)合移動端GPS實現(xiàn)
二、百度地圖如何使用
第一步：進入官網(wǎng)
百度地圖JavaScript API
直接搜百度地圖或者百度地圖開放平臺，或者直接點擊上方鏈接。
【官網(wǎng)】https://lbsyun.baidu.com/
第二步：進入開發(fā)文檔
百度地圖JavaScript API
或者直接點擊上方鏈接。
【百度地圖JavaScript API】https://lbsyun.baidu.com/index.php?title=jspopularGL
第三步：申請百度開發(fā)者密鑰
申請百度開發(fā)者密鑰網(wǎng)址
【申請百度開發(fā)者密鑰網(wǎng)址】https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey
獲取賬戶和密鑰
-
注冊百度賬號
申請百度賬號網(wǎng)址
【申請百度賬號網(wǎng)址】https://passport.baidu.com/v2/?login
先注冊百度賬號，如果有的話，直接登錄即可或者采用第三方登錄，登錄完成進入下一步
-
申請成為百度開發(fā)者
申請成為百度開發(fā)者網(wǎng)址
【[申請成為百度開發(fā)者網(wǎng)址】https://lbsyun.baidu.com/apiconsole/user/choose
按照步驟走就ok了
- 獲取服務(wù)密鑰（通行證）
獲取密鑰網(wǎng)址
【[獲取密鑰網(wǎng)址】https://lbsyun.baidu.com/apiconsole/key/create#/home
也可以配置為*，這樣全域可以訪問，但是缺點就是不安全
應(yīng)用名稱最好是英文，一定要選擇游覽器端
Referer白名單可以把你的域名放里面，如果上限域名還沒有，可以放自己電腦的IP地址，ip地址可以通過cmd輸入ipconfig獲取，如果你想放多個，可以以逗號隔開，如上圖所示
第四步：插入百度地圖
插入百度地圖網(wǎng)址
【插入百度地圖網(wǎng)址】https://lbsyun.baidu.com/apiconsole/key/create#/homehttps://lbsyun.baidu.com/index.php?title=jspopularGL/guide/helloworld
4.1申請密鑰=>已完成
4.2準(zhǔn)備頁面
創(chuàng)建一個html頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
4.3創(chuàng)建容器和創(chuàng)建地圖實例以及相關(guān)設(shè)置
寫容器，設(shè)置大小
創(chuàng)建地圖容器元素
地圖需要一個HTML元素作為容器，這樣才能展現(xiàn)到頁面上。這里我們創(chuàng)建了一個div元素。
<body>
<!-- 創(chuàng)建地圖容器元素 -->
<div id="container"></div>
</body>
設(shè)置容器樣式
<style>
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
引用百度地圖API文件
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密鑰">
</script>
地圖實例以及相關(guān)設(shè)置
- 創(chuàng)建地圖實例 => 位于BMapGL命名空間下的Map類表示地圖，通過new操作符可以創(chuàng)建一個地圖實例。其參數(shù)可以是元素id也可以是元素對象。
- 設(shè)置中心點坐標(biāo) => 我們使用BMapGL命名空間下的Point類來創(chuàng)建一個坐標(biāo)點。Point類描述了一個地理坐標(biāo)點，其中116.404表示經(jīng)度，39.915表示緯度。（為天安門坐標(biāo)）
- 地圖初始化，同時設(shè)置地圖展示級別 => 創(chuàng)建地圖實例后，我們需要對其進行初始化，BMapGL.Map.centerAndZoom()方法要求設(shè)置中心點坐標(biāo)和地圖級別。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
</head>
<script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=webgl&ak=IVrxhGKViMttmN3Mr0GntQHZUCwS30W4"></script>
<body>
<!-- 創(chuàng)建地圖容器元素 -->
<div id="container"></div>
</body>
<script>
// 創(chuàng)建地圖實例=> 參數(shù)可以是元素id也可以是元素對象。
var map = new BMapGL.Map("container");
// 設(shè)置中心點坐標(biāo)(經(jīng)緯度)=>天安門坐標(biāo)
var point = new BMapGL.Point(116.404, 39.915);
// 地圖初始化，同時設(shè)置地圖展示級別
map.centerAndZoom(point, 15);
</script>
</html>
這樣就可以看到我們的地圖放到頁面中了，地圖初始化完成默認(rèn)有拖拽功能
point 位置點
15是級別(范圍3-19),數(shù)值越小，地圖看的越遠越全，值越大，地圖看的越清晰
三、百度地圖添加控件(基本控件)
鼠標(biāo)滾輪
鼠標(biāo)滾輪縮放
【鼠標(biāo)滾輪縮放】https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/show
開啟鼠標(biāo)縮放配置代碼，默認(rèn)鼠標(biāo)滾輪是關(guān)閉你的，需要我們配置才能才起
//開啟鼠標(biāo)滾輪的事件
map.enableScrollWheelZoom(true); //鼠標(biāo)滾輪true 縮放 false不縮放
配置完成可通過鼠標(biāo)滾輪來控制地圖，向上滑放放大，向下則放小
添加控件
添加控件
【添加控件】https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/widget
官方提供的控件
- 平移縮放控件(NavigationControl)
PC端默認(rèn)位于地圖左上方，它包含控制地圖的平移和縮放的功能
// 添加控件平移縮放控件
map.addControl(new BMapGL.NavigationControl());
marker標(biāo)注(需要掌握)
添加標(biāo)注，點、線、面
【添加控件】https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/widget
標(biāo)注可以加入某種形狀，或者定義某一種類型，可以使用map.addOverlay方法向地圖添加覆蓋物，也可以使用map.removeOverlay方法移除覆蓋物。
1、地圖添加標(biāo)注marker
點 Marker 表示地圖上的點，可自定義標(biāo)注的圖標(biāo)(最常用)
添加標(biāo)注語法
var point = new BMapGL.Point(116.404, 39.915);
var marker = new BMapGL.Marker(point); // 創(chuàng)建標(biāo)注
map.addOverlay(marker); // 將標(biāo)注添加到地圖中
demo完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%
}
</style>
</head>
<script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=webgl&ak=IVrxhGKViMttmN3Mr0GntQHZUCwS30W4"></script>
<body>
<!-- 創(chuàng)建地圖容器元素 -->
<div id="container"></div>
</body>
<script>
// 1.創(chuàng)建地圖
var map = new BMapGL.Map("container");
// 2.設(shè)置中心點
var point = new BMapGL.Point(116.404, 39.915);
// 3.地圖初始化，同時設(shè)置地圖展示級別
// point 位置點 15是級別(范圍3-19)
map.centerAndZoom(point, 11);
// 4.數(shù)據(jù)滾輪
map.enableScrollWheelZoom(true); //開啟鼠標(biāo)滾輪縮放
// 5.地圖添加標(biāo)注
// 點 Marker 表示地圖上的點，可自定義標(biāo)注的圖標(biāo)(最常用)
var marker = new BMapGL.Marker(point); // 創(chuàng)建標(biāo)注
map.addOverlay(marker); // 將標(biāo)注添加到地圖中
</script>
</html>
效果
2、更改地圖標(biāo)注marker樣式–定義標(biāo)注圖標(biāo)
通過Icon類可實現(xiàn)自定義標(biāo)注的圖標(biāo)，下面示例通過參數(shù)MarkerOptions的icon屬性進行設(shè)置，您也可以使用marker.setIcon()方法。
完整icon類
var myIcon = new BMapGL.Icon("markers.png", new BMapGL.Size(23, 25), {
// 指定定位位置。
// 當(dāng)標(biāo)注顯示在地圖上時，其所指向的地理位置距離圖標(biāo)左上
// 角各偏移10像素和25像素。您可以看到在本例中該位置即是
// 圖標(biāo)中央下端的尖角位置。
anchor: new BMapGL.Size(10, 25),
// 設(shè)置圖片偏移。
// 當(dāng)您需要從一幅較大的圖片中截取某部分作為標(biāo)注圖標(biāo)時，您
// 需要指定大圖的偏移位置，此做法與css sprites技術(shù)類似。
imageOffset: new BMapGL.Size(0, 0 - 25) // 設(shè)置圖片偏移
});
// 創(chuàng)建標(biāo)注對象并添加到地圖
var marker = new BMapGL.Marker(point, {icon: myIcon});
map.addOverlay(marker);
根據(jù)需求使用icon類
new BMapGL.Icon(第一個參數(shù)圖片的路徑,第二個參數(shù)是圖片的大小)
創(chuàng)建標(biāo)注對象并添加到地圖
var marker = new BMapGL.Marker(point, {icon: myIcon});
map.addOverlay(marker);
素材圖片地址
demo完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%
}
</style>
</head>
<script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=webgl&ak=IVrxhGKViMttmN3Mr0GntQHZUCwS30W4"></script>
<body>
<!-- 創(chuàng)建地圖容器元素 -->
<div id="container"></div>
</body>
<script>
// 1.創(chuàng)建地圖
var map = new BMapGL.Map("container");
// 2.設(shè)置中心點
var point = new BMapGL.Point(116.404, 39.915);
// 3.地圖初始化，同時設(shè)置地圖展示級別
// point 位置點 15是級別(范圍3-19)
map.centerAndZoom(point, 11);
// 4.數(shù)據(jù)滾輪
map.enableScrollWheelZoom(true); //開啟鼠標(biāo)滾輪縮放
// 5.地圖添加標(biāo)注
// 點 Marker 表示地圖上的點，可自定義標(biāo)注的圖標(biāo)(最常用)
// var marker = new BMapGL.Marker(point); // 創(chuàng)建標(biāo)注
// map.addOverlay(marker); // 將標(biāo)注添加到地圖中
// 自定義圖片 通過Icon類可實現(xiàn)自定義標(biāo)注的圖標(biāo)
var myIcon = new BMapGL.Icon("img/260.jpg", new BMapGL.Size(23, 25))
// new BMapGL.Icon(第一個參數(shù)圖片的路徑,第二個參數(shù)是圖片的大小)
// 創(chuàng)建標(biāo)注對象并添加到地圖
var marker = new BMapGL.Marker(point, { icon: myIcon });
map.addOverlay(marker);
</script>
</html>
效果
2、標(biāo)注添加監(jiān)聽事件
語法
marker.addEventListener("click", function(){
alert("您點擊了標(biāo)注");
});
demo完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%
}
</style>
</head>
<script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=webgl&ak=IVrxhGKViMttmN3Mr0GntQHZUCwS30W4"></script>
<body>
<!-- 創(chuàng)建地圖容器元素 -->
<div id="container"></div>
</body>
<script>
// 1.創(chuàng)建地圖
var map = new BMapGL.Map("container");
// 2.設(shè)置中心點
var point = new BMapGL.Point(116.404, 39.915);
// 3.地圖初始化，同時設(shè)置地圖展示級別
// point 位置點 15是級別(范圍3-19)
map.centerAndZoom(point, 11);
// 4.數(shù)據(jù)滾輪
map.enableScrollWheelZoom(true); //開啟鼠標(biāo)滾輪縮放
// 5.地圖添加標(biāo)注
// 點 Marker 表示地圖上的點，可自定義標(biāo)注的圖標(biāo)(最常用)
// var marker = new BMapGL.Marker(point); // 創(chuàng)建標(biāo)注
// map.addOverlay(marker); // 將標(biāo)注添加到地圖中
// 自定義圖片 通過Icon類可實現(xiàn)自定義標(biāo)注的圖標(biāo)
var myIcon = new BMapGL.Icon("img/260.jpg", new BMapGL.Size(23, 25))
// new BMapGL.Icon(第一個參數(shù)圖片的路徑,第二個參數(shù)是圖片的大小)
// 創(chuàng)建標(biāo)注對象并添加到地圖
var marker = new BMapGL.Marker(point, { icon: myIcon });
map.addOverlay(marker);
// 監(jiān)聽事件
marker.addEventListener("click", function () {
alert("您點擊了標(biāo)注");
});
</script>
</html>
效果
文章來源：http://www.zghlxwxcb.cn/news/detail-622689.html
還在更新中，可以點個關(guān)注或者收藏哦
總結(jié)
如果這篇【文章】有幫助到你??，希望可以給我點個贊??，創(chuàng)作不易，如果有對前端端或者對python感興趣的朋友,請多多關(guān)注??????，咱們一起探討和努力?。?！
????? 個人主頁 : 前端初見文章來源地址http://www.zghlxwxcb.cn/news/detail-622689.html
到了這里，關(guān)于百度地圖API的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
