## 百度地圖 vue-baidu-map
1. 百度示例網(wǎng)址：http://lbsyun.baidu.com/jsdemo.htm#webgl4_0
2. 百度JSAPI網(wǎng)址：http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html
#### 引入使用
```vue
//main.js
import BaiduMap from 'common/components/vue-baidu-map'
Vue.use(BaiduMap, {
? // ak 是在百度地圖開發(fā)者平臺申請的密鑰 詳見 http://lbsyun.baidu.com/apiconsole/key */
? ak: 'CpmeIdqjNe7lNu74ZGEv6UO2IGQrVcqT'
});
//頁面vue
<baidu-map :center="centers" :zoom="zoom"
? ? ? ? ? ? @ready="handler" class="map"
? ? ? ? ? ? v-if="refresh" :ak="ak"
? ? ? ? ? ? />
//centers:視角中心點
//zoom:視角范圍大小
//@ready：地圖加載完成回調(diào)函數(shù)
//class="map"： 需要設(shè)置height值
//refresh： 用于強制刷新地圖
//ak：頁面ak,如全局ak已寫，則此處可不需要這個屬性
//地圖回調(diào)
? handler({BMap, map}) {
? ? ? ? let vm = this;
? ? ? ? vm.BMap = BMap;
? ? ? ? vm.map = map;
......
// 添加鼠標(biāo)滾動縮放
? ? ? ? map.enableScrollWheelZoom();
? ? ? ? //添加比例尺控件
? ? ? ? map.addControl(new BMap.ScaleControl());
? ? ? ? //添加地圖類型控件
? ? ? ? map.addControl(new BMap.MapTypeControl());
? ? ? ? //設(shè)置地圖皮膚
? ? ? ? map.setMapStyleV2({styleJson: styleJson});
}
//添加Marker
addMarker(item, index) {
? ? ? ? let vm = this
? ? ? ? let point = item.point ? new vm.BMap.Point(item.point.lng, item.point.lat) : new vm.BMap.Point(item.longitude, item.latitude);
? ? ? ? let marker = new vm.BMap.Marker(point, {
? ? ? ? ? ? icon: new vm.BMap.Icon('圖片路徑', new vm.BMap.Size(50, 50)),
? ? ? ? ? ? offset: new vm.BMap.Size(10, -16)
? ? ? ? ? })
? ? ? ? vm.addLabel(marker, item); //添加label
? ? ? ? vm.map.addOverlay(marker);//掛載標(biāo)注
},
//添加標(biāo)注label
? addLabel(markers, item) {
? ? ? ? let vm = this
? ? ? ? let label = new vm.BMap.Label(item['name'], {offset: new vm.BMap.Size(24, -20)})
// label設(shè)置樣式
? ? ? ? ? label.setStyle({
? ? ? ? ? ? color: "black",
? ? ? ? ? ? fontSize: "12px",
? ? ? ? ? ? height: '34px',
? ? ? ? ? ? border: null,
? ? ? ? ? ? padding: '5px',
? ? ? ? ? ? background: `url(${labels})? `
? ? ? ? ? });
? ? ? ? markers.setLabel(label);
},
? //添加標(biāo)注title
? ? addTitle(markers, point, item) {
? ? ? ? let vm = this
? ? ? ? let opts = {
? ? ? ? ? width: 200,? ? // 信息窗口寬度
? ? ? ? ? height: 100,? ? // 信息窗口高度
? ? ? ? ? title: item.name, // 信息窗口標(biāo)題
? ? ? ? };
? ? ? ? let sContent = `<h2 style='margin:0 0 5px 0;padding:0.2em 0'>
? ? ? ? ? ? ${item && item.title ? item.title : '標(biāo)題'}</h2><h5>${item && item.detail ? item.detail : '內(nèi)容'}</h5>`;
? ? ? ? let infoWindow = new vm.BMap.InfoWindow(sContent, opts);? // 創(chuàng)建信息窗口對象
? ? ? ? markers.addEventListener("mouseover", function (e) {
? ? ? ? ? vm.map.openInfoWindow(infoWindow, point); //開啟信息窗口
? ? ? ? });
? ? ? ? markers.addEventListener("mouseout", function (e) {
? ? ? ? ? vm.map.closeInfoWindow(infoWindow, point); //關(guān)閉信息窗口
? ? ? ? });
},
? //添加線路polyline
addPolyline(){
let path = 'M0 0 L-4 2 L0 -2 L4 2 Z';
? ? ? ? let sy = new vm.BMap.Symbol(path, {
? ? ? ? ? fillColor: "#fff",
? ? ? ? ? fillOpacity: 0.6,
? ? ? ? ? scale: 0.8,//圖標(biāo)縮放大小
? ? ? ? ? strokeColor: "#fff",//設(shè)置矢量圖標(biāo)的線填充顏色
? ? ? ? ? strokeWeight: 0,//設(shè)置線寬
? ? ? ? });
? ? ? ? let icons = new vm.BMap.IconSequence(sy, '5%', '4%');
let polyline = new vm.BMap.Polyline(res, {
? ? ? ? ? icons: [icons],//添加線路箭頭
? ? ? ? ? strokeColor: vm.searchModel.color,
? ? ? ? ? enableClicking: false,//是否響應(yīng)點擊事件，默認(rèn)為true
? ? ? ? ? strokeWeight: '6',//折線的寬度，以像素為單位
? ? ? ? ? strokeOpacity: 0.5,//折線的透明度，取值范圍0 - 1
? ? ? ? });
? ? ? ? vm.map.addOverlay(polyline);
? ? ? ? vm.map.setViewport(res)//根據(jù)提供的地理區(qū)域或坐標(biāo)設(shè)置地圖視野，調(diào)整后的視野會保證包含提供的地 理區(qū)域或坐標(biāo)
},
//添加路書LuShu
npm i bmaplib.lushu
import LuShu from 'bmaplib.lushu'
addLushu(){
? let myIcon = new vm.BMap.Icon(
? car, new vm.BMap.Size(50, 20), {? ? //小車圖片
? ? ? ? ? imageOffset: new vm.BMap.Size(0, 0),? ? //圖片的偏移量。為了是圖片底部中心對準(zhǔn)坐標(biāo)點。
? ? ? ? });
? ? ? ? ? let lushu = new LuShu(vm.map, ['軌跡集合'], {
? ? ? ? ? ? defaultContent: "",
? ? ? ? ? ? autoView: true, //是否開啟自動視野調(diào)整，如果開啟那么路書在運動過程中會根據(jù)視野自動調(diào)整
? ? ? ? ? ? icon: myIcon,
? ? ? ? ? ? enableRotation: true, //是否設(shè)置marker隨著道路的走向進行旋轉(zhuǎn)
? ? ? ? ? ? speed: 100,
? ? ? ? ? ? landmarkPois: []
? ? ? ? ? });
? ? ? ? ? lushu.start();
}
? //獲取定位
? getPosition(BMap, map){
new BMap.Geolocation().getCurrentPosition(function (r) {console.log(r)}）
}
? //強制刷新地圖
? ? refreshMap() {
? ? ? ? this.refresh = false;
? ? ? ? this.$nextTick(() => {
? ? ? ? ? this.refresh = true
? ? ? ? })
}
```
#### 階段總結(jié)
1. 地圖的各方法單獨抽離，以備使用
2. 地圖要設(shè)置高度，不然不顯示
3. 經(jīng)緯度使用時，檢查是否NEW過，否則不顯示
