微信小程序集成腾讯地图SDK与WebService API完整指南

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

  onLoad: function () {
    // 实例化API核心类
    this.qqmapsdk = new QQMapWX({
      key: '************************ // 替换为你的QQ地图SDK密钥
    });
  },

  // 事件触发，调用接口
  nearby_search: function () {
    var _this = this;
    // 调用接口
    this.qqmapsdk.search({
      keyword: 'kfc',  // 搜索关键词
      location: '39.980014,116.313972',  // 设置周边搜索中心点
      success: function (res) { // 搜索成功后的回调
        var mks = [];
        for (var i = 0; i < res.data.length; i++) {
          mks.push({ // 获取返回结果，放到mks数组中
            title: res.data[i].title,
            id: parseInt(res.data[i].id), // 将 id 转换为整数形式
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng,
            iconPath: "/assets/icon/position.png", // 图标路径
            width: 20,
            height: 20
          });
        }
        _this.setData({ // 设置markers属性，将搜索结果显示在地图中
          markers: mks
        });
      },
      fail: function (res) {
        console.log('搜索失败', res);
      },
      complete: function (res) {
        console.log('搜索完成', res);
      }
    });
  }
});

<!--绑定点击事件-->
<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">国家：</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, // 地图中心点纬度
    longitude: 0, // 地图中心点经度
    markers: [], // 地图标记点
    nation: '', // 国家
    province: '', // 省份
    city: '', // 城市
  },

  onLoad: function () {
    // 发起获取当前IP定位信息的请求
    this.getLocationByIP();
  },

  getLocationByIP: function () {
    // 替换成你自己申请的腾讯地图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定位结果：', res.data);
        if (res.data.status === 0) {
          const { location, ad_info } = res.data.result;
          const { lat, lng } = location;
          const { nation, province, city } = ad_info;

          // 更新页面数据，显示定位信息
          this.setData({
            latitude: lat,
            longitude: lng,
            markers: [{
              id: 1,
              latitude: lat,
              longitude: lng,
              title: city,
              iconPath: '/images/location.png', // 可自定义标记图标
              width: 30,
              height: 30
            }],
            nation: nation,
            province: province,
            city: city
          });
        } else {
          wx.showToast({
            title: '定位失败，请稍后重试',
            icon: 'none',
            duration: 2000
          });
        }
      },
      fail: (error) => {
        console.error('请求失败：', error);
        wx.showToast({
          title: '网络请求失败，请检查网络后重试',
          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;
}