// 引入SDK核心類
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
Page({
  data: {
    markers: []
  },

  onLoad: function () {
    // 實(shí)例化API核心類
    this.qqmapsdk = new QQMapWX({
      key: '************************ // 替換為你的QQ地圖SDK密鑰
    });
  },

  // 事件觸發(fā)，調(diào)用接口
  nearby_search: function () {
    var _this = this;
    // 調(diào)用接口
    this.qqmapsdk.search({
      keyword: 'kfc',  // 搜索關(guān)鍵詞
      location: '39.980014,116.313972',  // 設(shè)置周邊搜索中心點(diǎn)
      success: function (res) { // 搜索成功后的回調(diào)
        var mks = [];
        for (var i = 0; i < res.data.length; i++) {
          mks.push({ // 獲取返回結(jié)果，放到mks數(shù)組中
            title: res.data[i].title,
            id: parseInt(res.data[i].id), // 將 id 轉(zhuǎn)換為整數(shù)形式
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng,
            iconPath: "/assets/icon/position.png", // 圖標(biāo)路徑
            width: 20,
            height: 20
          });
        }
        _this.setData({ // 設(shè)置markers屬性，將搜索結(jié)果顯示在地圖中
          markers: mks
        });
      },
      fail: function (res) {
        console.log('搜索失敗', res);
      },
      complete: function (res) {
        console.log('搜索完成', res);
      }
    });
  }
});

<!--綁定點(diǎn)擊事件-->
<button bindtap="nearby_search">搜索周邊KFC</button>
<!--地圖容器-->
<map id="myMap"
   markers="{{markers}}"
   style="width:100%;height:300px;"
   longitude="116.313972"
   latitude="39.980014" scale='16'>
</map>

<view class="container">
  <view class="map-container">
    <map id="map" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" style="width: 100%; height: 400px;"></map>
  </view>
  <view class="info-container">
    <view class="info-item">
      <text class="info-label">國(guó)家：</text>
      <text class="info-value">{{nation}}</text>
    </view>
    <view class="info-item">
      <text class="info-label">省份：</text>
      <text class="info-value">{{province}}</text>
    </view>
    <view class="info-item">
      <text class="info-label">城市：</text>
      <text class="info-value">{{city}}</text>
    </view>
  </view>
</view>

Page({
  data: {
    latitude: 0, // 地圖中心點(diǎn)緯度
    longitude: 0, // 地圖中心點(diǎn)經(jīng)度
    markers: [], // 地圖標(biāo)記點(diǎn)
    nation: '', // 國(guó)家
    province: '', // 省份
    city: '', // 城市
  },

  onLoad: function () {
    // 發(fā)起獲取當(dāng)前IP定位信息的請(qǐng)求
    this.getLocationByIP();
  },

  getLocationByIP: function () {
    // 替換成你自己申請(qǐng)的騰訊地圖API密鑰
    const key = '************************';
    const apiUrl = `https://apis.map.qq.com/ws/location/v1/ip?key=${key}`;

    wx.request({
      url: apiUrl,
      method: 'GET',
      success: (res) => {
        console.log('IP定位結(jié)果：', res.data);
        if (res.data.status === 0) {
          const { location, ad_info } = res.data.result;
          const { lat, lng } = location;
          const { nation, province, city } = ad_info;

          // 更新頁(yè)面數(shù)據(jù)，顯示定位信息
          this.setData({
            latitude: lat,
            longitude: lng,
            markers: [{
              id: 1,
              latitude: lat,
              longitude: lng,
              title: city,
              iconPath: '/images/location.png', // 可自定義標(biāo)記圖標(biāo)
              width: 30,
              height: 30
            }],
            nation: nation,
            province: province,
            city: city
          });
        } else {
          wx.showToast({
            title: '定位失敗，請(qǐng)稍后重試',
            icon: 'none',
            duration: 2000
          });
        }
      },
      fail: (error) => {
        console.error('請(qǐng)求失?。?, error);
        wx.showToast({
          title: '網(wǎng)絡(luò)請(qǐng)求失敗，請(qǐng)檢查網(wǎng)絡(luò)后重試',
          icon: 'none',
          duration: 2000
        });
      }
    });
  }
});

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.map-container {
  width: 100%;
  margin-bottom: 20px;
}

.info-container {
  width: 100%;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 8px;
}

.info-item {
  display: flex;
  flex-direction: row;
  margin-bottom: 5px;
}

.info-label {
  font-weight: bold;
}

.info-value {
  margin-left: 5px;
}