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

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

提供以下几种解决思路：

检查图片路径是否错误
图标大小问题：

如果使用的是图标（如阿里图标库中的图标），下载的大小和设置的size最好保持一致
自定义的图标/片显示
如果自定义的图片太大，而你显示的大小又太小，这时是显示不完全的.

     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));

使用自定义标注

官方文档：自定义标注

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

每日一坑，踩完睡觉

百度地图解决自定义图标显示问题相关推荐

百度地图开发自定义图标无法显示的问题
直接上解决方案引入图标需要使用require关键字,不能只写资源路径: 你的图标的大小必须与百度地图设置的图标size一致,比如下图在icon font中下载了一个图标(200 * 200),在引入 ...
android百度地图定位自定义图标,百度地图SDK集成及根据坐标实现定位(android studio开发)...
百度地图SDK集成及根据坐标实现定位(android studio开发) 百度地图SDK集成及根据坐标实现定位(android studio开发) 1.下载百度地图SDK 链接:http://lbsy ...
react+百度地图实现自定义图标
开发环境 1.react 2.百度地图使用的是:rc-bmap 实现效果实现图中提示框的效果. 看到这个,用过百度地图的第一个会想到marker,其实不是,用的是Label,其实难点不在这,这个看看 ...
echarts 使用百度地图加入自定义图标标记
首先先上效果图,静态图(PS.制作动图还在学习中~): 地图上的文字未展示,根据经纬度标记图,循环展示每个标记点的数据~ 一.如何引入百度地图申请百度开发秘钥AK http://lbsyun.bai ...
android百度地图定位自定义图标,Android应用开发之android 百度地图自定义圆，更改默认图标等常用方法...
本文将带你了解Android应用开发之android 百度地图自定义圆,更改默认图标等常用方法,希望本文对大家学Android有所帮助. 总结了一下百度地图常用的方法(前提是集成百度地图环境成功): ...
百度地图 marker自定义图标并且删除指定的marker
使用百度地图的时候.标注常常是自定义图标,并且添加自定义的属性使用方式 this.list.forEach(ele => {let point = new BMap.Point(ele.lng ...
php网页地图上自定义,网页嵌入百度地图和使用百度地图api自定义地图的详细步骤...
在网页中插入百度地图如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击 ...
百度地图调用加载显示Marker，并添加点击事件
百度地图调用加载显示Marker,并添加点击事件注册百度开发者账号,申请应用AK 百度地图开发平台官网点击右上角控制台,选择创建应用创建应用,勾选浏览器端,白名单填写* 注:如上线更改为公网IP ...
Android百度地图定位APP，显示出当前位置坐标
Android百度地图定位APP,显示出当前位置坐标官网配置百度地图通过CMD命令获取SHA1 在百度的官网里面创建一个应用 Android配置显示地图即定位配置 AndroidManifes ...

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

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

百度地图解决自定义图标显示问题相关推荐

最新文章

热门文章