收藏
回答

map组件在开发工具上marker标记点、controls控件显示不出来,真机调试和手机显示正常?

开发工具版本号 1.05.2106300,操作系统windows7

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

1 个回答

  • 社区技术运营专员-Jahozheng
    社区技术运营专员-Jahozheng
    2021-08-20

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2021-08-20
    有用
    回复 3
    • 。。。
      。。。
      2023-05-05
      问题出现流程:
      正在学习一个比较老的项目共享单车,里面采用的是controls控件,我是完全按照代码一模一样来的
      出现的问题是模拟器:图标在地图上显示不出来,预览,用手机扫二维码,图标可以显示
      代码:
      index.wxml:
      <map id="map"
       latitude="{{latitude}}"
       longitude="{{longitude}}"
       controls="{{controls}}"
       markers="{{markers}}"
       scale="17"
       show-location
       style="width: 100%; height:100%"
       bindcontroltap="contap"
       bindregionchange="regionchange"
      ></map>
      index.js:
      //index.js
      Page({
        /**
           * 页面的初始数据
           */
        data: {
          //该页面中的两个变量
          latitude: 0,
          longitude: 0,
          //控件的变量,数组类型
          controls: []
        },
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
          //将当前对象赋给that,就是获取当前信息的拷贝。
          var that = this;
          //获取当前的位置信息
          wx.getLocation({
            //如果获取成功,会调用success
            success: function (res) {
              var lat = res.latitude;
              var log = res.longitude;
              //console.log("纬度" + lat + "经度" + log)
              that.setData({
                latitude: lat,
                longitude: log
              });
            }
          });
          //创建一个map上下文,如果想要调用地图相关的方发
          that.mapCtx = wx.createMapContext('map');
          //在地图页中加入按钮(归位、扫描、充值)
          //获取当前设备的信息,获取屏幕的宽高
          wx.getSystemInfo({
            success: function (res) {
              //屏幕高
              var height = res.windowHeight;
              //屏幕宽
              var width = res.windowWidth;
              //往页面中设置数据
              that.setData({
                controls: [{
                  //中心点位置
                  id: 1,
                  iconPath: '/image/location.png',
                  position: {
                    width: 20,
                    height: 35,
                    left: width / 2 - 10,
                    top: height / 2 - 35.
                  },
                  //是否可点击
                  clickable: true
                },{
                  //定位按钮安置
                  id: 2,
                  iconPath: '/image/img1.png',
                  position: {
                    width: 40,
                    height: 40,
                    left: 20,
                    top: height - 60.
                  },
                  //是否可点击
                  clickable: true
                }, {
                  //扫码按钮
                  id: 3,
                  iconPath: '/image/qrcode.png',
                  position: {
                    width: 100,
                    height: 40,
                    left: width / 2 - 50,
                    top: height - 60.
                  },
                  //是否可点击
                  clickable: true
                }, {
                  //充值按钮
                  id: 4,
                  iconPath: '/image/pay.png',
                  position: {
                    width: 40,
                    height: 40,
                    left: width - 45,
                    top: height - 60.
                  },
                  //是否可点击
                  clickable: true
                }]
              })
            },
          })
        },
        //在地图中绑定的事件
        contap(e) {
          //console.log(e)
          var that = this;
          if (e.controlId == 2) {
            //点击定位当前位置
            that.mapCtx.moveToLocation();
          }
          if (e.controlId == 3) {
            //点击扫描按钮
            wx.scanCode({
              success: function (r) {
                //扫描成功获取二维码的信息
                var code = r.result;
                //向后台发送请求
                wx.request({
                  //method: 'POST',
                  url: 'http://localhost:8888/bike', //仅为示例,并非真实的接口地址
                  data: {
                    qrCode: code,
                    latitude: that.data.latitude,
                    longitude: that.data.longitude
                  },
                  header: {
                    'content-type': 'application/json' // 默认值
                  },
                  success: function (res) {
                    console.log(res.data)
                  }
                })
              }
            })
          }
        },
        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function () {
        },
        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function () {
        },
        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function () {
        },
        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function () {
        },
        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function () {
        },
        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function () {
        },
        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function () {
        }
      })
      2023-05-05
      回复
    • 。。。
      。。。
      2023-05-05
      2023-05-05
      回复
    • 社区技术运营专员-Jahozheng
      社区技术运营专员-Jahozheng
      2023-05-06回复。。。
      按照链接提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
      2023-05-06
      回复
登录 后发表内容