首页 > 微信 > 详细

微信小程序input框之地图位置显示

时间:2021-02-28 15:19:39      阅读:38      评论:0      收藏:0      [点我收藏+]

页面效果

技术分享图片

HTML代码

<view class="mapBlock">
  <view class="lable">项目坐标</view>
  <map
      id="myMap"
      style="{{csstext}}"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      markers="{{markers}}"
      covers="{{covers}}"
      show-location
    ></map>
</view>

CSS代码

.mapBlock{
  height: 220rpx;
  display: flex;
  padding: 20rpx 30rpx;
  font-size: 14px;
  color: #333;
  background-color: #fff;
  box-sizing: border-box;
}
.mapBlock>.lable{
  line-height: 180rpx;
  width: 180rpx;
}

JS 代码

  data: {
    latitude:"",
    longitude:"",
    csstext:"",
  },
  onLoad: function (options) {
    const that=this;
    wx.getLocation({
      type: ‘gcj02‘,
      success (res) {
        console.log(res)
        that.setData({
          latitude:res.latitude,
          longitude:res.longitude
        })
      }
    })
    let w=wx.getSystemInfoSync().windowWidth;
    let mapw=w-20-90;
    let css=`width:${mapw}px;height:180rpx`;
    console.log(mapw,css)
    this.setData({
      csstext:css
    })
  },

 记录一下!!

微信小程序input框之地图位置显示

原文:https://www.cnblogs.com/banyuege/p/14458756.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!