收藏
回答

关于map组件的2个问题

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug map,cover-image 客户端 7.0.1 2.4.3

- 当前 Bug 的表现(可附上截图)

开发工具上,map的marker设置的iconPath正常显示,而真机预览总是默认的小红柱;

开发工具上的cover-image正常显示,真机预览无法显示

真机预览使用的是  iphone6 版本12.1.2

- 预期表现

(开发工具上显示正常)

(真机预览结果异常)



- 提供一个最简复现 Demo

demo.wxml

<view class="container">
<map
     id="wxmap"
     longitude="{{longi}}"
     latitude="{{lati}}"
     scale="16"
     markers="{{markers}}"
     bindmarkertap="markertap"
     bindregionchange="regionchange"
     style="width:100%;height:60%;"
 >
<cover-image class='reset' bindtap="resetCen" src='{{coverImage}}'></cover-image>
</map>
</view>


demo.wxss

.reset{
padding:10rpx;
border-radius: 50%;
background: #FFF;
width:38rpx;
height:38rpx;

position: absolute;
bottom: 32rpx;
right: 32rpx;
z-index: 10;
}
.reset_ico{
width: 38rpx;
height:38rpx;
z-index: 12;
}


demo.js

//获取应用实例
const app = getApp();

Page({
data: {
longi:'113.324520',
lati:'23.099994',
coverImage:'/resources/aim.svg',//本地图片
markers: [{
id: 1,
iconPath: '/resources/target_blue.svg',//本地图片
latitude: 23.099994,
longitude: 113.324520,
width: '56rpx',
height: '56rpx'
       }],
        wxmap:{}
},
onLoad: function () {
const _this = this;
_this.initialize();
    app.globalData.wxmap = wx.createMapContext("wxmap");
_this.wxmap = app.globalData.wxmap;

},
regionchange(e) {
if(e.type == 'end') {
this.wxmap.getCenterLocation({
success: (res) => {
this.setCentre({longitude:res.longitude,latitude:res.latitude});
}
});
}
},
resetCen:function(){
this.wxmap.moveToLocation();
   },
initialize:function() {
wx.getLocation({
success:(res)=>{
var coordinate = {
longitude:res.longitude,
latitude:res.latitude
               };
this.setScreenCentre(coordinate);
this.setCentre(coordinate);
}
});
},
setCentre:function (coordinate) {
this.setData({
'markers[0].latitude':coordinate.latitude,
'markers[0].longitude':coordinate.longitude
       });
},
// 屏幕中心坐标设置
   setScreenCentre:function (coordinate) {
this.setData({
longi:coordinate.longitude,
lati:coordinate.latitude,
});
}
})


回答关注问题邀请回答
收藏

2 个回答

  • 禾店短剧系统
    禾店短剧系统
    2021-06-01

    这格式坑也要太。。。不注意找死人

    2021-06-01
    有用 1
    回复
  • 是小白啊
    是小白啊
    2019-01-04

    麻烦提供下该代码片段:https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2019-01-04
    有用
    回复 9
    • 乐毅
      乐毅
      2019-01-04

      https://developers.weixin.qq.com/s/l2f8Hami7x5X

      2019-01-04
      回复
    • 是小白啊
      是小白啊
      2019-01-04回复乐毅

      不支持svg格式

      2019-01-04
      回复
    • 乐毅
      乐毅
      2019-01-04回复是小白啊

      QAQ

      还真的是,为什么开发者工具就显示了。。这坑.....

      多谢白哥了~

      2019-01-04
      回复
    • 是小白啊
      是小白啊
      2019-01-04回复乐毅

      客气了哈,工具跟真机是两个不同的终端,工具是模拟的原生组件的

      2019-01-04
      1
      回复
    • 六郎
      六郎
      2019-01-14回复乐毅



      我也偶遇了marker为小红柱,png格式的

      2019-01-14
      回复
    查看更多(4)
登录 后发表内容