vue項(xiàng)目引入百度地圖BMapGL鼠標(biāo)繪制和BMap輔助工具

更新時(shí)間：2023年02月03日 11:20:34 作者：你怎么在吐泡泡

這篇文章主要為大家介紹了vue項(xiàng)目引入百度地圖BMapGL鼠標(biāo)繪制和BMap輔助工具的踩坑分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

記錄一下vue項(xiàng)目使用百度地圖所用的api和踩過(guò)的坑，減少以后引用少走彎路。旨在記錄，第一次開貼，不足之處請(qǐng)多多指教。廢話不多說(shuō)，開擼！

1、引用百度地圖

這里賬號(hào)密鑰不多說(shuō)，上鏈接，自己注冊(cè)。

首先要在你項(xiàng)目的index.html里面加上以下代碼：這個(gè)是BMap

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

這個(gè)是BMapGL

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

如果需要使用輔助工具BMapGLLib ，還得把以下兩個(gè)也放入

<link  rel="external nofollow"  rel="stylesheet">
<script type="text/javascript" src="http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>

2、在項(xiàng)目中使用百度地圖

2-1、頁(yè)面結(jié)構(gòu)部分

（1）創(chuàng)建地圖容器元素

<div class="map-body" :id="mapId"></div>

（2）設(shè)置容器樣式大小

.map-body {
  position: relative;
  height: 500px;
  border: 1px solid #dcdfe6;
}

2-2、js邏輯部分

（1）創(chuàng)建地圖實(shí)例

createMap(lgt, lat) {
      // this.maploading=true;
      this.map = new BMapGL.Map(this.mapId, { enableMapClick: false }) // 創(chuàng)建Map實(shí)例,GL版命名空間為BMapGL(鼠標(biāo)右鍵控制傾斜角度)
      this.map.centerAndZoom(new BMapGL.Point(lgt, lat), 11)      // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
      this.map.enableScrollWheelZoom(true)// 開啟鼠標(biāo)滾輪縮放
    },

（2）把地圖賦值給全局變量，方便后續(xù)使用

  data() {
    return {
    map: "",
    mapId: "", //我這里采用了動(dòng)態(tài)id這個(gè)不是必須的，看自己需求來(lái)
    }

    created() {
        this.mapId = 'map' + new Date().getTime();
     }

（3）設(shè)置中心點(diǎn)坐標(biāo) 這里我們使用BMapGL命名空間下的Point類來(lái)創(chuàng)建一個(gè)坐標(biāo)點(diǎn)。Point類描述了一個(gè)地理坐標(biāo)點(diǎn)，其中116.404表示經(jīng)度，39.915表示緯度。（為天安門坐標(biāo)）

    const point = new BMapGL.Point(116.404, 39.915);

注意： 在使用百度地圖JavaScript API服務(wù)時(shí)，需使用百度BD09坐標(biāo)，如使用其他坐標(biāo)（ WGS84、GCJ02）進(jìn)行展示，需先將其他坐標(biāo)轉(zhuǎn)換為BD09，詳細(xì)說(shuō)明請(qǐng)參考坐標(biāo)轉(zhuǎn)換說(shuō)明，請(qǐng)勿使用非官方的轉(zhuǎn)換方法。

（4）地圖初始化

    created() {
        this.mapId = 'map' + new Date().getTime();
        const point = new BMapGL.Point(116.404, 39.915);
        //創(chuàng)建地圖
        this.$nextTick(() => {
          this.createMap(point.lng, point.lat);
        })
      },

到現(xiàn)在為止，百度地圖就在你頁(yè)面上創(chuàng)建成功了。附圖片：

3、在項(xiàng)目中使用百度地圖輔助工具BMapGLLib

現(xiàn)在的需求就是需要在頁(yè)面上標(biāo)注點(diǎn)，畫矩形，圓形的一些標(biāo)注線。百度地圖的輔助工具就剛好自帶了這兩個(gè)功能。

3-1、頁(yè)面結(jié)構(gòu)部分

（1）輔助工具欄html結(jié)構(gòu)和css樣式

   <ul class="drawing-panel">
     <li class="bmap-btn bmap-marker" @click="draw('marker')"
       :style="{ 'background-position-y': actNav === 'marker' ? '-52px' : '0px' }"></li>
     <li class="bmap-btn bmap-polyline" @click="draw('polyline')"
       :style="{ 'background-position-y': actNav === 'polyline' ? '-52px' : '0px' }"></li>
     <li class="bmap-btn bmap-rectangle" @click="draw('rectangle')"
       :style="{ 'background-position-y': actNav === 'rectangle' ? '-52px' : '0px' }"></li>
     <li class="bmap-btn bmap-polygon" @click="draw('polygon')"
       :style="{ 'background-position-y': actNav === 'polygon' ? '-52px' : '0px' }"></li>
     <li class="bmap-btn bmap-circle" @click="draw('circle')"
       :style="{ 'background-position-y': actNav === 'circle' ? '-52px' : '0px' }"></li>
   </ul>

.drawing-panel {
  z-index: 999;
  position: absolute;
  top: 14rem;
  margin-left: 2.5rem;
  padding-left: 0;
  border-radius: .25rem;
  height: 47px;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
.bmap-btn {
  border-right: 1px solid #d2d2d2;
  float: left;
  width: 64px;
  height: 100%;
  background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
  cursor: pointer;
}
.drawing-panel .bmap-marker {
  background-position: -65px 0;
}
.drawing-panel .bmap-polyline {
  background-position: -195px 0;
}
.drawing-panel .bmap-rectangle {
  background-position: -325px 0;
}
.drawing-panel .bmap-polygon {
  background-position: -260px 0;
}
.drawing-panel .bmap-circle {
  background-position: -130px 0;
}

結(jié)構(gòu)搭完效果如下：

3-2、js邏輯部分

上面地圖初始完后就能使用鼠標(biāo)繪制工具進(jìn)行需求的繪制

（1）實(shí)例化鼠標(biāo)繪制工具

    draw(drawingType) {
      console.log(drawingType, '666')
      this.actNav = drawingType
      /**這里看需求可以把它設(shè)置為全局變量。
      *我這里需求需要，故設(shè)置了全局變量，以下代碼就注釋掉了*/
      // const styleOptions = {
      //   strokeColor: '#5E87DB',   // 邊線顏色
      //   fillColor: '#5E87DB',     // 填充顏色。當(dāng)參數(shù)為空時(shí)，圓形沒(méi)有填充顏色
      //   strokeWeight: 2,          // 邊線寬度，以像素為單位
      //   strokeOpacity: 1,         // 邊線透明度，取值范圍0-1
      //   fillOpacity: 0.2          // 填充透明度，取值范圍0-1
      // };
      // const labelOptions = {
      //   borderRadius: '2px',
      //   background: '#FFFBCC',
      //   border: '1px solid #E1E1E1',
      //   color: '#703A04',
      //   fontSize: '12px',
      //   letterSpacing: '0',
      //   padding: '5px'
      // };
      // 實(shí)例化鼠標(biāo)繪制工具
      const drawingManager = new BMapGLLib.DrawingManager(this.map, {
        //isOpen: true,        // 是否開啟繪制模式
        enableCalculate: false, // 繪制是否進(jìn)行測(cè)距測(cè)面
        enableSorption: true, // 是否開啟邊界吸附功能
        sorptiondistance: 20, // 邊界吸附距離
        circleOptions: this.styleOptions, // 圓的樣式
        polylineOptions: this.styleOptions, // 線的樣式
        polygonOptions: this.styleOptions, // 多邊形的樣式
        rectangleOptions: this.styleOptions, // 矩形的樣式
        labelOptions: this.labelOptions,  // label樣式
      })
      // 進(jìn)行繪制
      if (drawingManager._isOpen && drawingManager.getDrawingMode() === drawingType) {
        drawingManager.close();
      } else {
        drawingManager.setDrawingMode(drawingType);
        drawingManager.open();
      }
      /** 我這里需求是圓形和矩形還有點(diǎn)的標(biāo)注，
      *還有兩種就沒(méi)有寫它的監(jiān)聽事件，也是差不多的，
      *可以對(duì)照一下官方api和我寫的就基本上差不多了，
      *如果有誰(shuí)需要，我有時(shí)間也可以繼續(xù)把剩下兩種監(jiān)聽事件補(bǔ)上 */
      // 監(jiān)聽事件
      if (drawingType == 'rectangle') {
        // 監(jiān)聽矩形繪制完成事件
        drawingManager.addEventListener("overlaycomplete", (e) => {
          // 獲取矩形對(duì)象
          const rectangle = e.overlay;
          // 獲取矩形的四個(gè)頂點(diǎn)
          const points = rectangle.getPath();
          console.log(points, "頂點(diǎn)");
          this.scope_point = points;
        });
      } else if (drawingType == 'circle') {
        // 監(jiān)聽圓形繪制完成事件
        drawingManager.addEventListener("overlaycomplete", (e) => {
          // 獲取圓形對(duì)象
          const circle = e.overlay;
          // 獲取圓形的圓心
          const center = circle.getCenter();
          console.log(center, "圓心");
          // 獲取圓形的半徑
          const radius = circle.getRadius();
          console.log(radius, "半徑");
          this.scope_point = center;
          this.scope_radius = radius;
        });
      } else if (drawingType == 'marker') {
        drawingManager.addEventListener("overlaycomplete", (e) => {
          // 獲取標(biāo)注對(duì)象
          const marker = e.overlay;
          // 獲取標(biāo)注的經(jīng)緯度坐標(biāo)
          this.point = marker.getPosition();
          // 創(chuàng)建地理編碼服務(wù)實(shí)例
          const geocoder = new BMapGL.Geocoder();
          // 將經(jīng)緯度坐標(biāo)解析為地址信息
          geocoder.getLocation(this.point, (result) => {
            this.newForm.address = result.address;
            console.log(this.point, result.address, "地址");
          });
        });
      }
    },

效果如圖所示（我只需要這三種，其他注釋掉了）：

4、在項(xiàng)目中使用BMap實(shí)例

注意： 大坑來(lái)啦?。?！ BMapGL 類創(chuàng)建的地圖實(shí)例不支持 addOverlay 方法,并且還不支持直接使用鼠標(biāo)繪制工具（BMapLib.DrawingManager 類）在地圖上繪制矩形框,故只能換成BMap)寫完才知道，只能硬著頭皮往下寫，因?yàn)槲倚枰故境鰟倓偖嫷哪切?biāo)注。。。

（1）重新初始化一個(gè)地圖實(shí)例（BMap）

 this.map = new BMap.Map(this.mapId, { enableMapClick: false });
 this.map.centerAndZoom(new BMap.Point(point_location[1], point_location[0]), 11)      // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別我這里的point_location是后臺(tái)返回的坐標(biāo)，跟上面的類似
 this.map.enableScrollWheelZoom(true)// 開啟鼠標(biāo)滾輪縮放

（2）創(chuàng)建標(biāo)記點(diǎn)

// 創(chuàng)建標(biāo)記點(diǎn)的坐標(biāo)
const point = new BMap.Point(point_location[1], point_location[0]);//point_location后臺(tái)返回字段
console.log(point, "坐標(biāo)")
// 創(chuàng)建標(biāo)記點(diǎn)對(duì)象
const marker = new BMap.Marker(point);
// 將標(biāo)記點(diǎn)添加到地圖上
this.map.addOverlay(marker);

（3）創(chuàng)建矩形框?qū)ο?/p>

// 創(chuàng)建矩形框?qū)ο?
 const rectangle = new BMap.Polygon([
   new BMap.Point(this.rectangle[3], this.rectangle[2]), //rectangle后臺(tái)返回的坐標(biāo)
   new BMap.Point(this.rectangle[5], this.rectangle[4]),
   new BMap.Point(this.rectangle[7], this.rectangle[6]),
   new BMap.Point(this.rectangle[9], this.rectangle[8]),
 ], this.styleOptions); //styleOptions之前的全局變量
 // 將矩形框添加到地圖上
 this.map.addOverlay(rectangle);
 // 設(shè)置地圖視野，使得矩形框完全顯示在地圖視野內(nèi)
 this.map.setViewport(rectangle.getPath());

（4）創(chuàng)建圓形對(duì)象

 // 創(chuàng)建圓心坐標(biāo)
 const center = new BMap.Point(this.rectangle[1], this.rectangle[0]);//rectangle后臺(tái)返回的圓形坐標(biāo)
 // 創(chuàng)建圓形標(biāo)注對(duì)象
 const circle = new BMap.Circle(center, this.scope_radius, this.styleOptions);
 // 將圓形標(biāo)注添加到地圖上
 this.map.addOverlay(circle);

以上就是vue項(xiàng)目引入百度地圖BMapGL鼠標(biāo)繪制和BMap輔助工具的詳細(xì)內(nèi)容，更多關(guān)于vue引入百度地圖BMapGL的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項(xiàng)目引入百度地圖BMapGL鼠標(biāo)繪制和BMap輔助工具

目錄

引言

1、引用百度地圖

2、在項(xiàng)目中使用百度地圖

2-1、頁(yè)面結(jié)構(gòu)部分

2-2、js邏輯部分

3、在項(xiàng)目中使用百度地圖輔助工具BMapGLLib

3-1、頁(yè)面結(jié)構(gòu)部分

3-2、js邏輯部分

4、在項(xiàng)目中使用BMap實(shí)例

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項(xiàng)目引入百度地圖BMapGL鼠標(biāo)繪制和BMap輔助工具

目錄

引言

1、引用百度地圖

2、在項(xiàng)目中使用百度地圖

2-1、頁(yè)面結(jié)構(gòu)部分

2-2、js邏輯部分

3、在項(xiàng)目中使用百度地圖輔助工具BMapGLLib

3-1、頁(yè)面結(jié)構(gòu)部分

3-2、js邏輯部分

4、在項(xiàng)目中使用BMap實(shí)例

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

1、引用百度地圖

2、在項(xiàng)目中使用百度地圖

2-1、頁(yè)面結(jié)構(gòu)部分

2-2、js邏輯部分

3、在項(xiàng)目中使用百度地圖輔助工具BMapGLLib

3-1、頁(yè)面結(jié)構(gòu)部分

3-2、js邏輯部分