vue3 百度地图marker图片引入

动态引入图片require()和import()

一、require

// html
<img :src="imgList[0]" />
// xxx.js
let imgList = [
    require('../images/a.png'),
    require('../images/b.jpg')
]

let imgName = 'a'; 
let imgAllName = 'a.png';

// example 1
let imgUrl = require('../images/a.png');                // 纯字符串
// example 2
let imgUrl = require('../images/' + imgAllName);        // 目录 + 文件全名
// example 3
let imgUrl = require('../images/' + imgName + '.png');  // 目录 + 文件名 + 后缀

二、import

1.先引入
import imgUrl from "../assets/test.png"

2.在 return 中输出  imgUrl 

3.<img :src="imgUrl" style="width: 50px;height: 50px;" alt="">

百度地图自定义图片点标记和文本内容：

<div id="containerMap"></div>


import myimg from "../assets/test.png"


var lat = data.value
var map = new BMapGL.Map("containerMap"); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(135.1213, 24.2563), 11); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

		var myIcon = new BMapGL.Icon(myimg, new BMapGL.Size(80, 80), //视窗大小
        );
		var point = new BMapGL.Point(135.1025, 24.1254);
		var marker = new BMapGL.Marker(point, {
				icon: myIcon
		});
		var content = "<table>";
		content = content + "<tr><td>" + 客户 + "</td></tr>";
		content = content + "<tr><td>" + 693 + "</td></tr>";
		content += "</table>";

		var optsion = {
			point: point,
			offset: new BMapGL.Size(-40, -60),//偏移量
			enableMassClear: true
				}

		var label = new window.BMapGL.Label(content, optsion)
		label.setStyle({        //文本框样式
					width: '80px',
					lineHeight: '15px',
					textAlign: 'center',
					color: '#ff0000',
					fontSize: '12px',
					border: '0px',
			})
					
		marker.setLabel(label) // 放到这个点上
		map.addOverlay(marker)