收藏
回答

小程序Map组件marker使用网络自定义图标,如何设置样式,如圆角边框?


最后一次编辑于  2019-08-03
回答关注问题邀请回答
收藏

6 个回答

  • 1+1=👪
    1+1=👪
    2021-10-25

    maker图标上层加lable,可以设置样式,但是lable不要设置背景色,不然就把maker图标盖住了。


    2021-10-25
    有用 1
    回复 1
    • 。
      2021-12-09
      谢谢
      2021-12-09
      回复
  • 雾林
    雾林
    2021-04-08

    你好! 请问这个问题您解决了吗?

    2021-04-08
    有用
    回复
  • 可sin~
    可sin~
    2020-04-26

    请问你解决了嘛?


    2020-04-26
    有用
    回复 2
    • XYH
      XYH
      2020-04-26
      无解
      2020-04-26
      回复
    • 可sin~
      可sin~
      2020-04-28回复XYH
      我不喜欢这个答案    哈哈哈哈
      2020-04-28
      回复
  • Raven R
    Raven R
    2020-03-01

    我认为此题无解,

    如果网络图片是方形,例如微信头像。

    2个marker 叠加遮盖的方法 最多呈现内边框的视觉效果。

    用来遮盖他的marker的尺寸必须要正正好盖住头像的四角,避免外边沿的穿帮。而且还不能因为盖的太多 而出现内边的穿帮。加上前面说的 定位是用坐标值的,假如通过凑数字正好放上去,那么在地图可以倾斜的时候肯定穿帮,地图缩放时候marker大小不会变化,也会穿帮。假如是预处理图片让图片尺寸擦切刚刚好,那既然都预处理了,干脆处理成单个marker的外观更好一些。

    2020-03-01
    有用
    回复
  • NULL
    NULL
    2019-10-28

    目前官方文档没看到有设置圆角 ,可以用另外一种 多增加marker的方式 与图片一一对应同坐标的固定圆角图片marker实现如图:


    2019-10-28
    有用
    回复 4
    • Raven R
      Raven R
      2020-03-01
      map上的定位点是使用坐标值,如何保证网络图片和marker 正好对准?
      2020-03-01
      回复
    • Raven R
      Raven R
      2020-03-01
      另一个问题是,如果网络图片是方形,例如微信头像。用来遮盖他的marker的尺寸必须要正正好盖住头像的四角,避免外边沿的穿帮。而且还不能因为盖的太多 而出现内边的穿帮。加上前面说的 定位是用坐标值的,假如通过凑数字正好放上去,那么在地图可以倾斜的时候肯定穿帮,地图缩放时候marker大小不会变化,也会穿帮。假如是预处理图片让图片尺寸擦切刚刚好,那既然都预处理了,干脆处理成单个marker的外观更好一些。
      2020-03-01
      回复
    • Chilam
      Chilam
      2022-12-08
      怎么实现的呢,背景图标和用户图标怎么组合
      2022-12-08
      回复
    • NULL
      NULL
      星期五 14:01回复Chilam
      就是每一个头像都多增加一个对应【底部尖尖的图标】同坐标不同大小的(相当于尖尖的图标覆盖住了头像,只是尖尖图标中间头像那个位置是透明的) 大概代码如下:
      // 头像1
       markerTempObj = {
                "id": i,
                "imei": obj.imei,
                "name": name,
                "iconPath": obj.img,
                "width": 39,
                "height": 39,
                "type": obj.type,
                "expire": obj.expire,
                "callout": this.getMarkerCallout(name),
                "longitude": obj.deviceInfoVO.longitude,
                "latitude": obj.deviceInfoVO.latitude,
              };
      // 头像1对应的【底部尖尖图标】
       markers.push({
                  "id": 100000 + i,
                  "zIndex": deviceLength + i,
                  "iconPath": '/lib/img/marker-bg.png',
                  "width": 66,
                  "height": 66,
                  "anchor": {
                    x: .5,
                    y: 0.73
                  },
                  "longitude": obj.deviceInfoVO.longitude,
                  "latitude": obj.deviceInfoVO.latitude,
                });
      星期五 14:01
      回复
  • 一戴小饼干🍪
    一戴小饼干🍪
    2019-08-03

    您好,请参考文档https://developers.weixin.qq.com/miniprogram/dev/component/map.html

    2019-08-03
    有用
    回复 3
    • XYH
      XYH
      2019-08-03
      marker里面并没有找到可以设置样式的方法
      2019-08-03
      回复
    • 97
      97
      2019-08-21
      callout不是吗
      2019-08-21
      回复
    • 可sin~
      可sin~
      2020-04-26回复97
      callout是放文本的吧 并且他是marker上方的气泡 并不是改变marker的样式
      2020-04-26
      回复
登录 后发表内容