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

 更新时间:2024年03月19日 10:07:52   作者:sunfan0  
这篇文章主要介绍了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 = '<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>

效果展示

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 创建vue项目没有router、view的解决办法

    创建vue项目没有router、view的解决办法

    在学习vue的时候遇到很多问题,这里做一些总结,下面这篇文章主要给大家介绍了关于创建vue项目没有router、view文件夹的解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • 基于axios封装fetch方法及调用实例

    基于axios封装fetch方法及调用实例

    下面小编就为大家分享一篇基于axios封装fetch方法及调用实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue集成three.js并加载glb、gltf、FBX、json模型的场景分析

    Vue集成three.js并加载glb、gltf、FBX、json模型的场景分析

    这篇文章主要介绍了Vue集成three.js,并加载glb、gltf、FBX、json模型,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • vue项目实现国际化的基本思路与详细步骤

    vue项目实现国际化的基本思路与详细步骤

    国际化是指项目能够根据不同国家的语言进行转换,便于不同国家的用户使用,这篇文章主要给大家介绍了关于vue项目实现国际化的基本思路与详细步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • vue3中使用logicFlow的方法代码示例

    vue3中使用logicFlow的方法代码示例

    在Vue3环境下,使用LogicFlow可实现流程图的绘制,详细步骤包括引入LogicFlow库,注册节点与边,设置主题和渲染数据,还包括使用Map和Menu进行功能扩展和右键编辑,以及通过事件监听实现交互,
    2024-10-10
  • 一文带你详细了解vue axios的封装

    一文带你详细了解vue axios的封装

    对请求的封装在实际项目中是十分必要的,它可以让我们统一处理 http 请求,比如做一些拦截,处理一些错误等,本篇文章将详细介绍如何封装 axios 请求,需要的朋友可以参考下
    2023-09-09
  • vue不用import直接调用实现接口api文件封装

    vue不用import直接调用实现接口api文件封装

    这篇文章主要为大家介绍了vue不用import直接调用实现接口api文件封装,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • vue3中emit('update:modelValue')使用简单示例

    vue3中emit('update:modelValue')使用简单示例

    这篇文章主要给大家介绍了关于vue3中emit('update:modelValue')使用的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-09-09
  • vue.js 图片上传并预览及图片更换功能的实现代码

    vue.js 图片上传并预览及图片更换功能的实现代码

    这篇文章主要介绍了vue.js 图片上传并预览及图片更换功能,小编主要围绕我们日常使用功能的例子做讲解,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • vue el-switch初始值(默认值)不能正确显示状态问题及解决

    vue el-switch初始值(默认值)不能正确显示状态问题及解决

    这篇文章主要介绍了vue el-switch初始值(默认值)不能正确显示状态问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论