【随心写作】微信小程序Map地图的用户

写作背景：心情有点复杂，看了之前写的文章，自己一下心情就好多了。有效的努力应该是看得见的回报，或者看得见的好评。而不是漫长的等待，苦苦的煎熬，充满风险。以及刚刚阅读之前写的文章看了下写作背景，自己也挺感动的，一些总结也打动了自己。多提醒自己，多学习以及尝试新事物。人生有那么多可能，谁能保证自己不是亿万老板呢。被公司一个恶心女大胖子，整吐了。换我自己的公司，肯定被我当面打，甚至侮辱。没有价值又喜欢搞事情。剁椒、咳嗽、肥胖。一大堆，恶心致命的缺点。陌生人可能会直接打人，不会客气。做了一个反例，总结了一下。先天的优势特别重要，一定要准确识别。社会本身三六九等，不客气是最好的客气。反正垃圾就是很恶心，肥胖、咳嗽、剁椒、踢脚，感到强烈的认知失调。真的被一个大胖子整吐了，不得不写出来发泄一下。等下顺便加载技术博客中。反正是很垃圾，动不动就是垃圾，反正所有行为80%，能让你不好。TM又被自己整的不开心了。一些跺脚啊，自己是很开心。别人不开心，你又没什么价值，而且是一大堆缺点。感觉这种人很有可能将来被打可能性很高，不是很高是已经打上准备被打的标签。说话也是恶心，听恶心的说一些话，怎么感觉浑身都不舒服。最重要是头不舒服。还好待帽子子，不然头发真的很容易白了。

app.json

{
  "pages":[
    "index/index"
  ],
  "useExtendedLib": {
    "kbone": true,
    "weui": true
  },
  "requiredPrivateInfos": ["getLocation"],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#F8F8F8",
    "navigationBarTitleText": "map",
    "navigationBarTextStyle":"black"
  }
}

index.js

Page({
  data: {
    // 地址授权开始
    scopeUserLocationShow: false,
    // 地址授权结束
    latitude: "",
    longitude: "",
    markers: [],
    covers: []
  },
  onReady: function (e) {
    this.mapCtx = wx.createMapContext('myMap')
    this.checkUserLocation()
  },
  scopeUserLocationHide() {
    this.setData({
      scopeUserLocationShow: false
    })
  },
  checkUserLocation() {
    const that = this
    wx.getSetting({
      success: (res => {
        console.log(res)
        let authSetting = res.authSetting
        if(authSetting["scope.userLocation"]) {
          that.getLocation()
        } else {
          setTimeout(() => {
            that.setData({
              scopeUserLocationShow: true
            })
          }, 2000)
        }
      })
    })
  },
  getLocation() {
    const that = this
    wx.getLocation({
      type: 'wgs84',
      success (res) {
        that.setData({
          scopeUserLocationShow: false,
          latitude: res.latitude,
          longitude: res.longitude
        })
        
        that.loadData()
        const latitude = res.latitude
        const longitude = res.longitude
        const speed = res.speed
        const accuracy = res.accuracy
      },
      fail(res) {
      }
     })
  },
  getCenterLocation: function () {
    this.mapCtx.getCenterLocation({
      success: function(res){
        console.log(res.longitude)
        console.log(res.latitude)
      }
    })
  },
  moveToLocation: function () {
    this.mapCtx.moveToLocation()
  },
  bindregionchange(e) {
    if(e.type == "end") {
      this.loadData()
    }
  },
  loadData() {
    const that = this
    wx.request({
      url: 'http://localhost:3000/store/list',
      method: 'GET',
      headers: {
        'content-type': 'application/json',
      },
      dataType: 'json',
      success: function (res) {
        let markers = [], includePoints = []

        includePoints.push({
          latitude: parseFloat(that.data.latitude),
          longitude: parseFloat(that.data.longitude)
        })

        let marker;
        res.data.data.forEach((row, index) => {
          try {
            that.data.storeData[row.store_id] = row
          } catch(error) {}

          marker = {
            scale: 14,
            markerId: row.store_id,
            id: row.store_id,
            latitude: parseFloat(row.latitude),
            longitude: parseFloat(row.longitude),
            width: 19,
            height: 31,
            iconPath: 'https://gw.alipayobjects.com/mdn/rms_dfc0fe/afts/img/A*x9yERpemTRsAAAAAAAAAAAAAARQnAQ'
          }
          markers.push(marker)
        })

        that.mapCtx.addMarkers({
          markers: markers
        })
      }
    })
  },
  translateMarker: function() {
    this.mapCtx.translateMarker({
      markerId: 1,
      autoRotate: true,
      duration: 1000,
      destination: {
        latitude:23.10229,
        longitude:113.3345211,
      },
      animationEnd() {
        console.log('animation end')
      }
    })
  },
  includePoints: function() {
    this.mapCtx.includePoints({
      padding: [10],
      points: [{
        latitude:23.10229,
        longitude:113.3345211,
      }, {
        latitude:23.00229,
        longitude:113.3345211,
      }]
    })
  }
})

index.json

{
  "usingComponents": {
    "mp-half-screen-dialog": "weui-miniprogram/half-screen-dialog/half-screen-dialog"
  }
}

index.wxml

<view class="page-body">
  <view class="page-section page-section-gap">
    <map
      id="myMap"
      style="width: 100%; height: 100vh;"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      markers="{{markers}}"
      show-location
      bindregionchange="bindregionchange"
    >
    <cover-view class="map-indicator">
      <image src="/static/image/home/map_indicator.png" />
    </cover-view>

    <cover-view class="cover-view">
      <cover-image class="cover-view-item cover-view-item-1" src="/static/image/home/map_return.png" bindtap="moveToLocation"/>
      <cover-image class="cover-view-item cover-view-item-2" src="/static/image/home/map_search.png" />
    </cover-view>

    </map>
  </view>

  <!-- <view class="btn-area">
    <button bindtap="getCenterLocation" class="page-body-button" type="primary">获取位置</button>
    <button bindtap="moveToLocation" class="page-body-button" type="primary">移动位置</button>
    <button bindtap="translateMarker" class="page-body-button" type="primary">移动标注</button>
    <button bindtap="includePoints" class="page-body-button" type="primary">缩放视野展示所有经纬度</button>
  </view> -->
  
  <mp-half-screen-dialog show="{{scopeUserLocationShow}}" closabled="{{false}}">
    <view slot="title" class="weui-flex dialog-title">
      <image class="dialog-logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" />
      昵称
    </view>
    <view slot="desc">你的位置信息将用于小程序位置接口的效果展示</view>
    <view slot="footer">
      <button type="default" class="js_close weui-btn weui-btn_default" bindtap="scopeUserLocationHide">取消</button>
      <button type="primary" class="js_close weui-btn weui-btn_primary" bindtap="getLocation">授权</button>
    </view>
  </mp-half-screen-dialog>
</view>

index.wxss

page {
  overflow: hidden;
}

.dialog-title {
  align-items: center;
  font-size: 28rpx;
}

.dialog-logo {
  height: 24px;
  width: 24px;
  margin-right: 8px;
  border-radius: 50%;
  display: block;
}

.map-indicator, .map-indicator image {
  width: 19px;
  height: 31px;
}
.map-indicator image {
  position: absolute;
  left: 50%;
  top: calc(50% - 28rpx);
  transform: translate3d(-50%, -50%, 0);
}
.cover-view {
  position: absolute;
  bottom: 128rpx;
  right: 24rpx;
  display:flex;
  flex-direction:row;
  background-color: rgba(0, 0, 0, 0);
  flex-direction: column;
}
.cover-view-item{
  width: 102rpx;
  height: 102rpx;
}

效果图：