百度地图 api 覆盖用户头像

最新推荐文章于 2023-12-15 10:12:17 发布

NiZerin

最新推荐文章于 2023-12-15 10:12:17 发布

阅读量979

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：百度地图 javascript

本文链接：https://blog.youkuaiyun.com/weixin_43426860/article/details/90034104

javascript 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何使用百度地图API实现用户头像在地图上的显示，并通过代码示例展示了如何从后台获取用户信息，创建并添加带有圆形裁剪效果的用户头像图标到地图上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

百度地图 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>