vue 百度地图自定义弹框样式

• 引入百度地图

  在index.html文件中引入百度地图 申请百度密钥

    <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文件内添加 externals 选项

  无需再用import引入

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

• 地图开发代码参考

<template>
    <!--地图容器-->
    <div id="map_box"></div>
</template>
<script>
  export default {
    name:'',
    data () {
      return {
      	map: null,
      	infoBox: null,
      }
    },
    mounted(){
	    this.showMap()
	    
	    //动态添加的dom 调用vue事件
	    let _this = this
		window.imageClick= function() {
			_this.vueImageClick()
		}
    },
    methods: {
		/**
		* 地图展示
		*/
		showMap() {
			this.map = new BMap.Map('map_box')//对应地图容器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 })  // 创建标注
	        marker.addEventListener('click', () => {
	        	//关闭其他标记点的弹框
				if (_this.infoBox != null) {
					_this.infoBox.close()
				}
				_this.markerPointClick(113.302114, 22.452695)
	        })
	        _this.map.addOverlay(marker)
	      },
		/**
		* 点击marker弹出信息框
		*/
		markerPointClick(lat, lng) {
			let _this = this
			let html = '
\n' +
			       '
按钮
\n' +
			       '
'
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('弹框中按钮的点击事件')
}
}
}
</script>
<style scoped>
#map_box{
width: 100%;
height: 650px;
}
</style>
<style>
/*自定义弹框样式--需要写在公共样式中才起作用*/
.infoBoxContent{
width: 435px;
height: 233px;
background-color: cyan;
}
</style>

• 效果展示

  上面代码部分未贴动态加的节点与相关样式，可以自行添加