微信小程序--map

最新推荐文章于 2023-05-17 18:14:21 发布

嗅嗅匆匆

最新推荐文章于 2023-05-17 18:14:21 发布

阅读量522

点赞数

分类专栏：微信小程序文章标签：小程序 map

本文链接：https://blog.csdn.net/qq_27190353/article/details/79365024

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

//获取手机屏幕信息

wx.getSystemInfo({
   success: function (res) {
        that.setData({
        console.log(res.model)
        console.log(res.pixelRatio)
        console.log(res.windowWidth)
        console.log(res.windowHeight)
        console.log(res.language)
        console.log(res.version)
  });
}

地图上添加悬浮窗或按钮时，直接使用会被地图覆盖掉，
此时需要使用另外的一个控件，controls控件
可参考https://www.w3cschool.cn/weixinapp/weixinapp-map.html
http://blog.csdn.net/hedong_77/article/details/55189978
在使用controls控件时，若需要动态设置显示位置，可参考下面代码。

wx.getSystemInfo({
      success: function (res) {
        that.setData({
          controls: [{
            id: 1,
            iconPath: '../../img/ssearch.png',
            position: {
              left: res.windowWidth / 1.41,
              top: res.windowWidth / 4
              //width   默认为图片宽度
              //height  默认为图片高度
            },
            clickable: true
          }]
        });
      }
    })
    控件点击事件
 controltap: function (e) {
    var that = this;
    that.getDirWether();
  }
  对应的wxml文件
   <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap" controls="{{controls}}" bindcontroltap="controltap">
      <cover-view class="{{weatherDataView?'show':'hide'}};">
        <cover-view class='weatherData'>{{'城市：' + weatherData.currentCity}}</cover-view>
        <cover-view class='weatherData'>{{'PM2.5：' + weatherData.pm25}}</cover-view>
        <cover-view class='weatherData'>{{'日期：' + weatherData.date }}</cover-view>
        <cover-view class='weatherData'>{{'温度：' + weatherData.temperature}}</cover-view>
        <cover-view class='weatherData'>{{'天气：' + weatherData.weatherDesc}}</cover-view>
        <cover-view class='weatherData'>{{'风力：' + weatherData.wind}}</cover-view>
      </cover-view>
    </map>