百度地图解决自定义图标显示问题

百度地图解决自定义图标太大不显示问题

这几天碰到这个需求, 需要在百度地图上显示头像,因为图片太大一直没有显示,百度了几天,解决都长一样,心累。

提供以下几种解决思路:

  1. 检查图片路径是否错误

  2. 图标大小问题:

    如果使用的是图标(如阿里图标库中的图标),下载的大小和设置的size最好保持一致在这里插入图片描述

  3. 自定义的图标/片显示
    如果自定义的图片太大,而你显示的大小又太小,这时是显示不完全的.

		var myIcon = new BMap.Icon(imgsrc, new BMap.Size(32, 32));

这里踩了雷,这里的size是图标可视区域的大小,所以你只能看到图片的一部分。
不仔细看文档真的容易踩雷,还半天找不出错误。
在这里插入图片描述
在这里插入图片描述

那需要怎么解决大图片问题呢?
我想到的有两种:
(1)使用setImageSize(offset: Size)方法

  • 首先,创建Icon , imgsrc是图片的路径,new的Size尽可能是或者接近你的图片大小,即你想要的原始图片可视区域大小。
var myIcon = new BMap.Icon(imgsrc, new BMap.Size(图片的长, 图片的宽));
  • 然后,使用setImageSize(offset: Size)方法将图片设置成你想要显示的大小,即实现了缩放的效果。
myIcon.setImageSize(new BMap.Size(32,32));
  1. 使用自定义标注

官方文档:自定义标注

具体参考文档实现。
然后参看了一位佬的自定义圆形头像标注,也把链接贴上来:百度地图API,自定义圆形头像标柱

每日一坑,踩完睡觉
在这里插入图片描述

  • 6
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
百度地图提供了自定义覆盖物的功能,您可以使用该功能在地图上添加自定义的标记、图标、信息窗口等元素。 首先,您需要在地图上创建一个自定义覆盖物对象。您可以继承百度地图API的`Overlay`类,实现自己的覆盖物对象。例如,您可以创建一个自定义标记的覆盖物对象: ```javascript function CustomMarker(point) { this._point = point; } CustomMarker.prototype = new BMap.Overlay(); CustomMarker.prototype.initialize = function (map) { this._map = map; var div = document.createElement('div'); div.style.position = 'absolute'; div.style.backgroundColor = 'red'; div.style.width = '20px'; div.style.height = '20px'; div.innerHTML = '自定义标记'; map.getPanes().markerPane.appendChild(div); this._div = div; return div; }; CustomMarker.prototype.draw = function () { var pixel = this._map.pointToOverlayPixel(this._point); this._div.style.left = pixel.x - 10 + 'px'; this._div.style.top = pixel.y - 10 + 'px'; }; ``` 然后,在地图上添加自定义的覆盖物对象。您可以使用百度地图API的`Overlay`类的`initialize()`方法和`draw()`方法来实现添加和绘制自定义覆盖物。例如: ```javascript var map = new BMap.Map("mapContainer"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); var customMarker = new CustomMarker(point); map.addOverlay(customMarker); ``` 以上代码创建了一个地图对象,设置地图中心点和缩放级别,然后创建了一个自定义标记的覆盖物对象,并将其添加到地图上显示。 除了自定义标记,您还可以创建其他类型的自定义覆盖物,例如自定义图标、信息窗口等。具体的实现方法可以根据您的需求进行调整。您可以参考百度地图API的文档,了解更多关于自定义覆盖物的相关信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值