需求;
爲了使用百度地圖的3D控件及旋轉地圖功能,特此研究了vue-bmap-gl
一.安裝:
npm install vue-bmap-gl -D
二.main.js全局引入
import VueBMap from 'vue-bmap-gl' import 'vue-bmap-gl/dist/style.css' Vue.use(VueBMap) VueBMap.initBMapApiLoader({ // 百度的key ak: 'T9XgL5DpTmOQvL0SbN362KIzYpR52LYU', // 用自己的百度地圖ak // 百度 sdk 版本,默認爲 1.0 v: '1.0' })
三.組件代碼如下:
<template> <div> <div id="container" /> <div class="zlp-control"> <el-button @click="big()">放大一級</el-button> <el-button @click="small()">縮小一級</el-button> </div> </div> </template> <script> import { lazyBMapApiLoaderInstance } from 'vue-bmap-gl' export default { data() { return { map: null, centerPoint: { lng: 116.404, lat: 39.915 }, zoom: 15, mapType: 'BMAP_EARTH_MAP' } }, mounted() { this.init() }, methods: { small() { this.map.zoomOut() }, big() { this.map.zoomIn() }, NavigationControl3D() { // eslint-disable-next-line no-undef var navi3DCtrl = new BMapGL.NavigationControl3D() // 添加3D控件 this.map.addControl(navi3DCtrl) }, LocationControl() { // 創建定位控件 // eslint-disable-next-line no-undef var locationControl = new BMapGL.LocationControl({ // 控件的停靠位置(可選,默認左上角) // anchor: 'BMAP_ANCHOR_TOP_RIGHT', // 控件基於停靠位置的偏移量(可選) // eslint-disable-next-line no-undef // offset: new BMapGL.Size(20, 20) }) // 將控件添加到地圖上 this.map.addControl(locationControl) // 添加定位事件 locationControl.addEventListener('locationSuccess', function(e) { var address = '' address += e.addressComponent.province address += e.addressComponent.city address += e.addressComponent.district address += e.addressComponent.street address += e.addressComponent.streetNumber alert('當前定位地址爲:' + address) }) locationControl.addEventListener('locationError', function(e) { alert(e.message) }) }, init() { lazyBMapApiLoaderInstance.load().then(() => { // eslint-disable-next-line no-undef const GL = BMapGL this.map = new GL.Map('container', { minZoom: 5, maxZoom: 20 }) // 創建Map實例 this.map.centerAndZoom(new GL.Point(this.centerPoint.lng, this.centerPoint.lat), this.zoom) this.map.enableScrollWheelZoom(true) this.map.setMapType(this.mapType) this.NavigationControl3D() this.LocationControl() }) } } } </script> <style lang="scss" scoped> #container { width: 100%; height: 100vh; } .zlp-control { position: fixed; top: 50px; left: 50px; z-index: 100; } </style>
四.效果如下: