通过本指南可以快速跑通小程序 JSAPI：在地图上展示当前位置、当前城市天气，以及周边的美食 POI。

• 已安装微信开发者工具并使用微信登录。

• 已申请开放平台 AK，见账号和密钥。

• 已创建小程序项目、引入 libs/bmap-wx.min.js、配置 request 合法域名、声明 getLocation 隐私接口，见配置环境。

配置环境中已添加 https://api.map.baidu.com 到 request 合法域名。保存并提交后的界面如下：

回到开发者工具点击"编译"同步配置。开发调试阶段也可以在"详情 - 本地设置"中勾选"不校验合法域名…"临时跳过校验。

示例中的 POI 标注使用本地图标，请在项目根目录新建 img 目录并放入一张标注图片，命名为 marker_red.png（可从开发包 demo/img/ 目录中获取）。

用下面三段代码分别替换 pages/index 下的对应文件，并把 您的ak 替换为自己的 AK：

// pages/index/index.js
// 引用百度地图微信小程序 JSAPI 模块
const { BMapWX } = require('../../libs/bmap-wx.min.js');

const bmap = new BMapWX({ ak: '您的ak' });

Page({
  data: {
    latitude: '',
    longitude: '',
    markers: [],
    city: '',
    weather: '',
    pois: [],
    error: '',
  },

  onLoad() {
    this.locate();
  },

  // 逆地址解析：把当前定位点解析为地址，并作为地图中心
  locate() {
    bmap.reverseGeocoding({
      iconPath: '../../img/marker_red.png',
      iconTapPath: '../../img/marker_red.png',
      success: (res) => {
        const me = res.wxMarkerData[0];
        this.setData({
          latitude: me.latitude,
          longitude: me.longitude,
          address: me.address,
        });
        this.loadWeather();
        this.searchAround();
      },
      fail: err => this.setData({ error: '定位失败：' + (err.message || err.errMsg) }),
    });
  },

  // 天气查询：注意 location 为"经度,纬度"，与其他接口顺序相反
  loadWeather() {
    bmap.weather({
      location: this.data.longitude + ',' + this.data.latitude,
      success: (res) => {
        const w = res.weatherData;
        this.setData({
          city: w.currentCity,
          weather: w.weatherDesc + ' ' + w.temperature + '℃',
        });
      },
      fail: err => console.log('天气查询失败', err.message || err.errMsg),
    });
  },

  // 周边检索：wxMarkerData 可直接绑定到 <map markers>
  searchAround() {
    bmap.search({
      query: '美食',
      location: this.data.latitude + ',' + this.data.longitude,
      iconPath: '../../img/marker_red.png',
      iconTapPath: '../../img/marker_red.png',
      success: res => this.setData({ markers: res.wxMarkerData, pois: res.wxMarkerData }),
      fail: err => this.setData({ error: '检索失败：' + (err.message || err.errMsg) }),
    });
  },

  onMarkerTap(e) {
    const poi = this.data.pois[e.markerId];
    if (poi) {
      wx.showToast({ title: poi.title, icon: 'none' });
    }
  },
});

<!-- pages/index/index.wxml -->
<view class="header">
  <text class="city">{{city}}</text>
  <text class="weather">{{weather}}</text>
</view>

<view class="map-wrap">
  <map
    class="map"
    longitude="{{longitude}}"
    latitude="{{latitude}}"
    scale="15"
    show-location
    markers="{{markers}}"
    bindmarkertap="onMarkerTap"
  />
</view>

<view class="address" wx:if="{{address}}">当前位置：{{address}}</view>

<view class="poi-list">
  <view class="poi" wx:for="{{pois}}" wx:key="id">
    <text class="poi-title">{{index + 1}}. {{item.title}}</text>
    <text class="poi-addr">{{item.address}}</text>
  </view>
</view>

<view class="error" wx:if="{{error}}">{{error}}</view>

/* pages/index/index.wxss */
.header { display: flex; justify-content: space-between; padding: 20rpx 30rpx; font-size: 30rpx; }

.map-wrap { height: 600rpx; width: 100%; }
.map { height: 100%; width: 100%; }

.address { padding: 20rpx 30rpx; font-size: 26rpx; color: #666; }

.poi { padding: 16rpx 30rpx; border-bottom: 1rpx solid #eee; }
.poi-title { display: block; font-size: 28rpx; }
.poi-addr { display: block; font-size: 24rpx; color: #999; }

.error { padding: 30rpx; font-size: 26rpx; color: #d63031; }

保存后开发者工具会自动编译。首次运行会弹出位置授权提示，允许后即可看到地图、当前城市天气与周边 POI 列表；点击地图上的标注会提示该 POI 名称。

各接口的完整参数与返回值说明见"开发指南 → 获取地图数据"下的对应文档。需要完整可运行的产品化示例（周边探索、多方案路线对比、静态图取景联动、天气主题切换等），可参考 GitHub 上的 demo 目录。