vue 百度地图自定义弹框样式_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>
  
1
2
3

• 在webpack.base.conf.js文件内添加 externals 选项

  无需再用import引入

	module.exports = {
		context: path.resolve(__dirname, '../'),
		entry: {
		    app: './src/main.js'
		},
		externals: {
			'BMap': 'BMap',
			'BMapLib': 'BMapLib'
		},
		output: {}
	}
1
2
3
4
5
6
7
8
9
10
11

• 地图开发代码参考

<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 = '<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('弹框中按钮的点击事件')
		}
     }
}
</script>
<style scoped>
  #map_box{
    width: 100%;
    height: 650px;
  }
</style>
<style>
  /*自定义弹框样式--需要写在公共样式中才起作用*/
  .infoBoxContent{
  	width: 435px;
    height: 233px;
    background-color: cyan;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

• 效果展示

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