百度地图 api 覆盖 用户头像

百度地图 api 如何覆盖 用户头像
话不多说，先上图。

都是因为业务需求，还有一个变态的产品经理。

代码部分

引入百度地图 API

<!-- 引入 百度地图 API -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak={{config('appinfo.baiDuMap')}}"></script>
<!-- 引入百度地图 个性化地图样式-->
<script src="/js/bdMap.js"></script>

实例化 百度地图 API

<script>
	// 百度地图API功能
	var map = new BMap.Map ("l-map");          // 创建地图实例
	var point = new BMap.Point ({{$cityInfo->city_lng??116.404}}, {{$cityInfo->city_lat??39.915}});  // 创建点坐标
	map.centerAndZoom (point, 12);
	map.enableScrollWheelZoom (true);     //开启鼠标滚轮缩放
	map.setMapStyleV2 ({styleJson: myStyleJson});
	
	// userApi.getUserInfo().then((res)=>{
	// 模拟从后台拿到数据
	let res = [
		{
			"info": {
				"user_id": "dttw2dozfx",
				// 因为公司用的 阿里云OSS ，图片在读取时可以直接裁剪
				// 长宽 50px 加 圆角效果
				// '?x-oss-process=image/resize,m_fixed,h_50,w_50,image/rounded-corners,r_25'
				"user_header": "http://driveyes.oss-cn-hangzhou.aliyuncs.com/headers/q1lwj11554885576509.png?x-oss-process=image/resize,m_fixed,h_50,w_50,image/rounded-corners,r_25"
			}, "location": {"lat": "31.155454", "lng": "121.130553"}
		}, {
			"info": {
				"user_id": "z1nq7riveh",
				"user_header": "http://driveyes.oss-cn-hangzhou.aliyuncs.com/headers/1sn76g1556108105792.png?x-oss-process=image/resize,m_fixed,h_50,w_50,image/rounded-corners,r_25"
			}, "location": {"lat": "31.255454", "lng": "121.130553"}
		},{
			"info": {
				"user_id": "z1nq7riveh",
				"user_header": "http://driveyes.oss-cn-hangzhou.aliyuncs.com/headers/1sn76g1556108105792.png?x-oss-process=image/resize,m_fixed,h_50,w_50,image/rounded-corners,r_25"
			}, "location": {"lat": "31.205454", "lng": "121.190553"}
		},
    ];
    // 遍历数组
	for ( let v of res ) {
		//创建头像
		var ads = new BMap.Point (v.location.lng, v.location.lat);
		var header = new BMap.Icon (v.info.user_header, new BMap.Size (50, 50));
		var marker = new BMap.Marker (ads, {icon: header});  // 创建标注
		map.addOverlay (marker);              // 将标注添加到地图中
		//给头像添加点击事件
		marker.addEventListener ("click", function () {
			vue.showUserI ('main', v.info.user_id);
		});
	}
	console.log (JSON.stringify (res));
	// });

</script>

点击事件效果图

欢迎访问：泽林博客