快捷導(dǎo)航

vue百度地圖實(shí)現(xiàn)自定義彈框樣式

更新時(shí)間：2024年03月19日 10:07:52 作者：sunfan0

這篇文章主要介紹了vue百度地圖實(shí)現(xiàn)自定義彈框樣式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

引入百度地圖

在index.html文件中引入百度地圖申請(qǐng)百度密鑰

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密鑰"></script> 
<script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js" ></script>

在webpack.base.conf.js文件內(nèi)添加 externals 選項(xiàng)

無(wú)需再用import引入

	module.exports = {
		context: path.resolve(__dirname, '../'),
		entry: {
		    app: './src/main.js'
		},
		externals: {
			'BMap': 'BMap',
			'BMapLib': 'BMapLib'
		},
		output: {}
	}

地圖開(kāi)發(fā)代碼參考

<template>
    <!--地圖容器-->
    <div id="map_box"></div>
</template>
<script>
  export default {
    name:'',
    data () {
      return {
      	map: null,
      	infoBox: null,
      }
    },
    mounted(){
	    this.showMap()
	    
	    //動(dòng)態(tài)添加的dom 調(diào)用vue事件
	    let _this = this
		window.imageClick= function() {
			_this.vueImageClick()
		}
    },
    methods: {
		/**
		* 地圖展示
		*/
		showMap() {
			this.map = new BMap.Map('map_box')//對(duì)應(yīng)地圖容器id
			let centerPoint = new BMap.Point(113.302114, 22.452695)
			this.map.centerAndZoom(centerPoint, 15)
			this.map.enableScrollWheelZoom(true)
			this.map.enableDoubleClickZoom(true)
			/*
			//地圖樣式
			this.map.setMapStyle({
			  styleJson: []
			})*/
			this.markerPoint()
		},
		/**
		* 添加地圖marker
		*/
		markerPoint() {
	        let _this = this
	        this.map.clearOverlays()
	        let iconImage = new BMap.Icon(require('../assets/icon/menuIcon.png'), new BMap.Size(24, 24))
	        let point = new BMap.Point(113.302114, 22.452695)
	        let marker = new BMap.Marker(point, { icon: iconImage })  // 創(chuàng)建標(biāo)注
	        marker.addEventListener('click', () => {
	        	//關(guān)閉其他標(biāo)記點(diǎn)的彈框
				if (_this.infoBox != null) {
					_this.infoBox.close()
				}
				_this.markerPointClick(113.302114, 22.452695)
	        })
	        _this.map.addOverlay(marker)
	      },
		/**
		* 點(diǎn)擊marker彈出信息框
		*/
		markerPointClick(lat, lng) {
			let _this = this
			let html = '<div class="infoBoxContent">\n' +
			       '<p οnclick="imageClick()">按鈕</p>\n' +
			       '</div>'
			let opts = {
				boxStyle: {
				width: '435px',
				height: '233px'
				// margin: '30px 0',
				},
				closeIconMargin: '25px 5px 0 0',
				closeIconUrl: require('../assets/icon/close_btn.png'),
				enableAutoPan: true,
				align: INFOBOX_AT_TOP
			}
			
			this.infoBox = new BMapLib.InfoBox(this.map, html, opts)
			/*this.infoBox._getCloseIcon = function() {
			return ''
			}*/
			let point = new BMap.Point(lat, lng)
			let marker = new BMap.Marker(point)
			this.infoBox.open(marker)
		},
		vueImageClick(){
			console.log('彈框中按鈕的點(diǎn)擊事件')
		}
     }
}
</script>
<style scoped>
  #map_box{
    width: 100%;
    height: 650px;
  }
</style>
<style>
  /*自定義彈框樣式--需要寫在公共樣式中才起作用*/
  .infoBoxContent{
  	width: 435px;
    height: 233px;
    background-color: cyan;
  }
</style>