//main.js

import BaiduMap from 'common/components/vue-baidu-map'

Vue.use(BaiduMap, {

// ak 是在百度地圖開發者平臺申請的密鑰 詳見 http://lbsyun.baidu.com/apiconsole/key */

ak: 'CpmeIdqjNe7lNu74ZGEv6UO2IGQrVcqT'

});

//頁面vue

@ready="handler" class="map"

v-if="refresh" :ak="ak"

/>

//centers:視角中心點

//zoom:視角范圍大小

//@ready：地圖加載完成回調函數

//class="map"： 需要設置height值

//refresh： 用于強制刷新地圖

//ak：頁面ak,如全局ak已寫，則此處可不需要這個屬性

//地圖回調

handler({BMap, map}) {

let vm = this;

vm.BMap = BMap;

vm.map = map;

......

// 添加鼠標滾動縮放

map.enableScrollWheelZoom();

//添加比例尺控件

map.addControl(new BMap.ScaleControl());

//添加地圖類型控件

map.addControl(new BMap.MapTypeControl());

//設置地圖皮膚

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);//掛載標注

},

//添加標注label

addLabel(markers, item) {

let vm = this

let label = new vm.BMap.Label(item['name'], {offset: new vm.BMap.Size(24, -20)});

//label設置樣式

label.setStyle({

color: "black",

fontSize: "12px",

height: '34px',

border: null,

padding: '5px',

background: `url(${labels}) `

});

markers.setLabel(label);

},

//添加標注title

addTitle(markers, point, item) {

let vm = this

let opts = {

width: 200, // 信息窗口寬度

height: 100, // 信息窗口高度

title: item.name, // 信息窗口標題

};

let sContent = `

${item && item.title ? item.title : '標題'}

${item && item.detail ?

item.detail : '內容'}`;

let infoWindow = new vm.BMap.InfoWindow(sContent, opts); // 創建信息窗口對象

markers.addEventListener("mouseover", function (e) {

vm.map.openInfoWindow(infoWindow, point); //開啟信息窗口

});

markers.addEventListener("mouseout", function (e) {

vm.map.closeInfoWindow(infoWindow, point); //關閉信息窗口

});

},

//添加圓circle

circle(item) {

vm.map.addOverlay(new vm.BMap.Circle({lng: item.longitude, lat: item.latitude}, 900, {

strokeColor: "blue",

strokeWeight: 2,

strokeOpacity: 0.5

}));

}

//添加線路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,//圖標縮放大小

strokeColor: "#fff",//設置矢量圖標的線填充顏色

strokeWeight: 0,//設置線寬

});

let icons = new vm.BMap.IconSequence(sy, '5%', '4%');

let polyline = new vm.BMap.Polyline(res, {

icons: [icons],//添加線路箭頭

strokeColor: vm.searchModel.color,

enableClicking: false,//是否響應點擊事件，默認為true

strokeWeight: '6',//折線的寬度，以像素為單位

strokeOpacity: 0.5,//折線的透明度，取值范圍0 - 1

});

vm.map.addOverlay(polyline);

vm.map.setViewport(res)//根據提供的地理區域或坐標設置地圖視野，調整后的視野會保證包含提供的地理區域或坐標

},

//添加路書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), //圖片的偏移量。為了是圖片底部中心對準坐標點。

});

let lushu = new LuShu(vm.map, ['軌跡集合'], {

defaultContent: "",

autoView: true, //是否開啟自動視野調整，如果開啟那么路書在運動過程中會根據視野自動調整

icon: myIcon,

enableRotation: true, //是否設置marker隨著道路的走向進行旋轉

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

})

}

總結

以上是生活随笔為你收集整理的baidumap vue 判断范围_百度地图 vue-baidu-map的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。