導讀
百度地圖的強大功能我在這裡就不一一贅述了，本篇文章也隻是對百度地圖JavaScript API進行一個介紹，希望可以對小夥伴有所幫助，這裡是本篇文章git位址。
首先借用官網的一句話介紹一下百度地圖JavaScript API:
百度地圖JavaScript API是一套由JavaScript語言編寫的應用程式接口，可幫助您在網站中建構功能豐富、互動性強的地圖應用，支援PC端和移動端基于浏覽器的地圖應用開發，且支援HTML5特性的地圖開發。
!!!此篇文章是仿照官方提供的文檔中比較基礎、适合入門的例子進行編寫，覺得介意的小夥伴就可以選擇退出了哈，不過還是可以稍微瞄一眼，哈哈，我們開始~~
戰前準備
1. 注冊
首先在使用百度地圖之前，小夥伴們必須先要擁有一個自己的百度賬号，申請注冊成為百度開發者，然後建立一個應用，就可以擷取到一個唯一的服務秘鑰(AK)，然後就可以使用相關服務了。
具體流程如下：
2.建立應用
3. 擷取我們的AK
經過以上3步，我想大家已經有了屬于自己的一個AK了吧，so， 接下來的我将會以React+webpack為技術棧進行編寫，萬變不離其宗，Vue的小夥伴或者使用其他技術棧的小夥伴都可以借鑒一下，我們開始。
Hello 百度地圖
1.crate-react-app
react 官方也是提供了一個很友善的腳手架工具，這裡就不一一闡述了，畢竟本篇文章的關注點不是這裡，以後有機會的話可能會單獨寫一篇，小夥伴們見諒~~
create-react-app baiduMap
cd baiduMap
npm start
複制代碼
2.配置webpack
這裡配置webpack的主要原因就是解決BMap報錯的問題BMap is not defined,在這裡推薦使用webpack最為主要的解決手段，就是通過webpack輸出對象中的externals屬性實作require的通路。
externals:{
'BMap':'BMap'
}
複制代碼這裡webpack的externals的功能我概括為兩點：
1.寫入externals中的依賴是不會被打包進最後的bundle裡面的。
2.雖然它不會被打包，但在程式運作的時候你仍然能通過子產品化的方式去引入這些依賴，
如commonJS,AMD,ES6的import等
3.引入百度地圖api檔案
在webpack的HTML模闆中引入
複制代碼
4.建立地圖容器元素
複制代碼
5.建立地圖執行個體
//引入地圖依賴
import BMap from 'BMap';
...
componentDidMount() {
const map = new BMap.Map("mapContent");
// 建立地圖執行個體
const point = new BMap.Point(116.404, 39.915);
// 建立點坐标
map.centerAndZoom(point, 15);
}
複制代碼
6.實作
經過以上幾步，我們就可以出來一個很簡陋的地圖出來了，😄，确實是簡陋，給大家先看一下效果
好了，看到這裡，小夥伴們是不是對地圖充滿興趣了呢，來我們接着向下看，後面有更多有意思的東西在等着你哦 😜
百度地圖 沖呀！
此部分是百度地圖的主要功能部分，在這裡給小夥伴們具體展示一下，後續可以根據自己的需求進行修改。
1.設定中心點
中心點的設定方法主要有兩種
1. 根據經緯度。
// 建立點坐标
const point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 12);
2.根據城市名。
// 直接使用城市名作為中間點
map.centerAndZoom('天津', 12);
複制代碼
2.設定Zoom值
// Zoom值其實就是地圖可放大，可縮小的一個範圍，我們可以設定地圖的最大最小縮放級别
var map = new BMap.Map("mapContent",{minZoom:4,maxZoom:8});
map.centerAndZoom('天津', 12); // 這裡的12指的是預設縮放級别
複制代碼
3.設定可縮放地圖
// 預設的地圖是隻可以滑鼠拖動的，滑鼠滾輪不會修改Zoom值
map.enableScrollWheelZoom(true);
複制代碼
4.添加地圖控件
// 混合圖
var mapType = new BMap.MapTypeControl(
{
mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP],
anchor: BMAP_ANCHOR_TOP_LEFT
}
);
// 鷹眼圖
var overView = new BMap.OverviewMapControl();
// 比例尺
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
// 添加預設縮放平移控件
var top_left_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});
map.addControl(mapType);
map.addControl(overView);
map.addControl(top_left_control);
map.addControl(top_left_navigation);
複制代碼
5.添加标注點
這是這裡用到的一些資料
const data = [
{
lon: 116.304854,
lat:39.921988,
address: '地點1',
people: '周元',
doThing: '暴揍趙牧神'
},
{
lon: 116.417824,
lat:39.921910,
address: '地點2',
people: '夭夭',
doThing: '沉睡冰棺'
},
{
lon: 116.517777,
lat:39.821999,
address: '地點3',
people: '吞吞',
doThing: '死亡曆練'
}
];
複制代碼for(var i=0;i
var marker = new BMap.Marker(new BMap.Point(data[i].lon,data[i].lat)); // 建立标注
var content = [data[i].address,data[i].people,data[i].doThing] ;
map.addOverlay(marker);// 将标注添加到地圖上
}
複制代碼
6.添加事件
往往在實際項目中經常會遇到，點選标注點彈出該點的一些資訊，我們這裡嘗試一下
for(var i=0;i
var marker = new BMap.Marker(new BMap.Point(data[i].lon,data[i].lat)); // 建立标注
var content = [data[i].address,data[i].people,data[i].doThing] ;
map.addOverlay(marker);// 将标注添加到地圖中
this.addClickHandler(content,marker, map); // 添加一個點選事件 将我們的map傳遞過去
}
//addClickHandler 方法
addClickHandler = (content,marker, map) => {
const that = this;
marker.addEventListener("click",function(e){
that.openInfo(content,e, map)}
);
}
// openInfo 方法
openInfo = (content,e, map) => {
// 定義視窗資訊
const opts = {
width : 250, // 資訊視窗寬度
height: 120, // 資訊視窗高度
title : "資訊視窗" , // 資訊視窗标題
enableMessage:true//設定允許資訊窗發送短息
};
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(
`
地點：${content[0]}
人物：${content[1]}
事件：${content[2]}
`
,opts); // 建立資訊視窗對象
map.openInfoWindow(infoWindow,point); //開啟資訊視窗
}
複制代碼可以實作一下效果，小夥伴們可以自己自由發揮樣式之類哦 😯
7.位址解析
位址解析就是可以把一個具體的位址轉化為經緯度
var myGeo = new BMap.Geocoder();
// 将位址解析結果顯示在地圖上，并調整地圖視野 這裡val就是想要查找的位址,point就是傳回的經緯度
myGeo.getPoint(val, function(point){
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
}
});
複制代碼
8.逆位址解析
逆位址解析就是把經緯度轉化為詳細位址，主要分為兩種：
1.指定經緯度擷取位址
2.滑鼠點選地圖擷取位址
指定經緯度擷取位址
var myGeo = new BMap.Geocoder();
// 根據坐标得到位址描述
myGeo.getLocation(new BMap.Point(116.364, 39.993), function(result){
if (result){
alert(result.address);
}
});
複制代碼
滑鼠點選地圖擷取位址(地方與地方之間查出來的詳情是不一樣的，有的可以查到街道，有的就之能查到區縣)
var geoc = new BMap.Geocoder();
map.addEventListener("click", function(e){
var pt = e.point;
geoc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
複制代碼
百度地圖最厲害的地方就是規劃，不管是駕車規劃、步行規劃等，都是我們平時生活中用的最多的地方，這裡就介紹一下駕車規劃。
9.駕車規劃
var driving = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
autoViewport: true,
panel: document.querySelector('r-reslut')
}
});
// 起點
var start = new BMap.Point(startPoint[0], startPoint[1]);
// 終點
var end = new BMap.Point(endPoint[0], endPoint[1]);
driving.search(start, end);
複制代碼
綜上 就是我對于百度地圖的一些簡單操作的一點小見解，其實百度地圖還有很多很多有意思的功能，在這裡就不和大家說了，如果小夥伴們覺得有意思的話，可以去看一下百度地圖的官網，點這裡，文中如有錯誤，歡迎在評論區指正，如果這篇文章幫助到了你，歡迎點贊👍和關注，😀。
推薦閱讀