百度地圖Api使用：定製自定義元件的簡單寫法

阿新 • • 發佈：2021-02-18

百度地圖Api使用：定製自定義元件的簡單寫法

前言
一、官方Api的使用方法
二、改善方法
- 1.思路
- 2.示例
總結

前言

技術棧：vue2.0，elementUI，BaiduMap JavaScript2.0。
適用：自定義元件比較複雜，js寫html和css過程繁雜。

一、官方Api的使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name= 
"viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		body, html {
			width: 100%;
			height: 100%;
			margin:0;
			font-family:"微軟雅黑";
		}
		#container{
			width:100%;
			height:100%;
            overflow: hidden;
		}
	</style> 

	<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的金鑰"></script>
	<title>自定義控制元件</title>
</head>
<body>
    <div id="container"></div>
    <script>
        var map = new BMapGL.Map('container' 
);
        map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);

        //定義一個控制元件類
        function ZoomControl() {
            this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
            this.defaultOffset = new BMapGL.Size(20, 20)
        }
        //通過JavaScript的prototype屬性繼承於BMap.Control
        ZoomControl.prototype = new BMapGL.Control();

        //自定義控制元件必須實現自己的initialize方法，並且將控制元件的DOM元素返回
        //在本方法中建立個div元素作為控制元件的容器，並將其新增到地圖容器中
        ZoomControl.prototype.initialize = function(map) {
             //建立一個dom元素
            var div = document.createElement('div');
             //新增文字說明
            div.appendChild(document.createTextNode('放大2級'));
              // 設定樣式
            div.style.cursor = "pointer";
            div.style.padding = "7px 10px";
            div.style.boxShadow = "0 2px 6px 0 rgba(27, 142, 236, 0.5)";
            div.style.borderRadius = "5px";
            div.style.backgroundColor = "white";
            // 繫結事件,點選一次放大兩級
            div.onclick = function(e){
                map.setZoom(map.getZoom() + 2);
            }
            // 新增DOM元素到地圖中
            map.getContainer().appendChild(div);
            // 將DOM元素返回
            return div;
        }
        //建立控制元件元素
        var myZoomCtrl = new ZoomControl();
        //新增到地圖中
        map.addControl(myZoomCtrl);
    </script>
</body>
</html>

以上是官方給的示例程式碼，前面初始化什麼的都沒什麼問題。主要是我們定製的自定義元件dom，如果是個單一按鈕或者輸入框還好寫，複雜元件用原生js寫實在是太過繁雜。官方示例的演示地址：BaiduMap自定義元件（PS：這裡的api是BaiduMapGL的）
百度自定義元件

二、改善方法

1.思路

首先將要寫的元件直接寫在Vue的template中。這樣可以正常使用ElementUI，使用Vue的方法和屬性。
在BaiDuMap的自定義元件初始化中，將dom生成的過程改為直接使用document.getElementById()函式獲取。
最後將獲取的dom新增到自定義元件中。

2.示例

在template中寫dom

   <div id="CustomControl" style="padding: 7px"></div>
   <div id="switch" style="line-height: 30px">
     <span>跟隨視角：</span>
     <el-switch v-model="followingView.isTrue"></el-switch>
   </div>
   <div id="change">
     <span>切換跟隨車輛：</span>
     <!-- <el-button type="primary" icon="el-icon-refresh" circle></el-button> -->
     <el-button round size="mini" icon="el-icon-refresh" @click="changeFollowingCar"></el-button>
   </div>

獲取並新增dom到自定義元件

// 新增自定義視角跟隨控制元件
     // 定義一個控制元件類
     function ZoomControl () {
       this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT
       this.defaultOffset = new BMap.Size(10, 60)
     }
     // 通過JavaScript的prototype屬性繼承於BMap.Control
     ZoomControl.prototype = new BMap.Control()

     // 自定義控制元件必須實現自己的initialize方法，並且將控制元件的DOM元素返回
     // 在本方法中建立個div元素作為控制元件的容器，並將其新增到地圖容器中
     ZoomControl.prototype.initialize = function (map) {
       // 建立一個dom元素
       let div = document.getElementById('CustomControl')
       // 子元素1：控制是否開啟跟隨視角
       let e1 = document.getElementById('switch')
       div.appendChild(e1)
       // 子元素2：切換跟隨車輛
       let e2 = document.getElementById('change')
       div.appendChild(e1)
       div.appendChild(e2)
       // 設定樣式
       div.style.boxShadow = '2px 4px 6px 2px rgba(27, 142, 236, 0.7)'
       div.style.borderRadius = '2px'
       div.style.background = 'transparent'
       // 新增DOM元素到地圖中
       map.getContainer().appendChild(div)
       // 將DOM元素返回
       return div
     }