一篇文章搞定百度地圖基本操做

導讀

---

百度地圖的強大功能我在這裏就不一一贅述了，本篇文章也只是對百度地圖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模板中引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密鑰"></script>

複製代碼

4.建立地圖容器元素

<div id = "mapContent" style={{ height: '100vh', width: '100%' }}></div>

複製代碼

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<data.length;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<data.length;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(
              `
                <div>
                  地點：${content[0]} <br />
                  人物：${content[1]} <br />
                  事件：${content[2]} <br />
                </div>
              `  
            ,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);

複製代碼

綜上 就是我對於百度地圖的一些簡單操做的一點小看法，其實百度地圖還有不少不少有意思的功能，在這裏就不和你們說了，若是小夥伴們以爲有意思的話，能夠去看一下百度地圖的官網，點這裏，文中若有錯誤，歡迎在評論區指正，若是這篇文章幫助到了你，歡迎點贊👍和關注，😀。

---

推薦閱讀

• 媽耶，此次終於瞭解繼承了！
• 媽媽不再用擔憂我用很差ECharts了