微信小程序实现地图功能(腾讯地图)

<!-- index.wxml -->
<view class="container">
  <view class="header">
    <text class="title">当前位置</text>
    <button class="button" bindtap="refreshLocation">刷新</button>
  </view>
  <view class="address">
    <text class="label">地址：</text>
    <text>{{ address }}</text>
  </view>
  <view class="poi">
    <text class="label">周边兴趣点：</text>
    <scroll-view class="poi-list" scroll-y="true">
      <block wx:for="{{ poiList }}" wx:key="index">
        <view class="poi-item">{{ item.title }}</view>
      </block>
    </scroll-view>
  </view>
</view>

/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
}
.title {
  font-size: 18px;
  font-weight: bold;
}
.address,
.poi {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
}
.label {
  font-weight: bold;
  margin-right: 10px;
}
.address text,
.poi text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.poi-list {
  height: 200px;
  margin-left: 10px;
}
.poi-item {
  padding: 5px 0;
}

// index.js
const QQMapWX = require('./libs/qqmap-wx-jssdk.min');
Page({
  data: {
    address: '正在获取地址信息...',
    poiList: []
  },
  onLoad() {
    this.qqmapsdk = new QQMapWX({
      key: '你的腾讯地图API密钥'
    });
    this.refreshLocation();
  },
  refreshLocation() {
    wx.getLocation({
      type: 'wgs84',
      success: (res) => {
        const { latitude, longitude } = res;
        this.setData({
          address: '正在获取地址信息...',
          poiList: []
        });
        this.qqmapsdk.reverseGeocoder({
          location: {
            latitude,
            longitude
          },
          success: (res) => {
            const { formatted_addresses: { recommend }, pois } = res.result;
            this.setData({
              address: recommend,
              poiList: pois
            });
          },
          fail: () => {
            this.setData({
              address: '获取地址信息失败',
              poiList: []
            });
          }
        });
      },
      fail: () => {
        this.setData({
          address: '获取位置信息失败',
          poiList: []
        });
      }
    });
  }
});