收藏
回答

关于map组件的2个问题

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
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,
});
}
})


最后一次编辑于  01-04  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

1 个回答

  • 是柿子啊
    是柿子啊
    01-04

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

    01-04
    赞同
    回复 9
    • 乐毅
      乐毅
      01-04

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

      01-04
      回复
    • 是柿子啊
      是柿子啊
      01-04回复乐毅

      不支持svg格式

      01-04
      回复
    • 乐毅
      乐毅
      01-04回复是柿子啊

      QAQ

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

      多谢白哥了~

      01-04
      回复
    • 是柿子啊
      是柿子啊
      01-04回复乐毅

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

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



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

      01-14
      回复
    查看更多(4)