微信小程序使用高德地图微SDK开发案例

在微信小程序中集成高德地图微SDK，可以方便地实现地图相关功能。以下是一个基本的使用高德地图微SDK开发的案例，包含地图展示和基本的定位功能。

1. 准备工作

申请高德地图 API Key：

登录 高德开放平台 申请并获取 API Key。

创建微信小程序项目：

使用微信开发者工具创建一个新的小程序项目。

2. 安装高德地图微SDK

在小程序的 app.json 文件中配置 map 组件的 key，并添加高德地图微SDK的相关配置：

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "高德地图微SDK示例"
  },
  "map": {
    "key": "你的高德地图API Key"
  }
}

3. 编写页面代码

3.1 页面结构

在 pages/index/index.wxml 文件中，添加一个地图组件：

  
  
  获取当前位置

3.2 页面样式

在 pages/index/index.wxss 文件中，定义地图的样式：

/* pages/index/index.wxss */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

map {
  flex: 1;
}

3.3 页面逻辑

在 pages/index/index.js 文件中，实现获取当前位置和地图初始化：

// pages/index/index.js
Page({
  data: {
    longitude: 0,
    latitude: 0
  },

  onLoad: function () {
    this.getLocation();
  },

  // 获取当前位置
  getLocation: function () {
    wx.getLocation({
      type: 'wgs84',
      success: (res) => {
        this.setData({
          latitude: res.latitude,
          longitude: res.longitude
        });
        this.initMap();
      },
      fail: (error) => {
        wx.showToast({
          title: '获取位置失败',
          icon: 'none'
        });
        console.error('获取位置失败', error);
      }
    });
  },

  // 初始化地图
  initMap: function () {
    const mapContext = wx.createMapContext('map');
    mapContext.moveToLocation(); // 移动到当前位置

    // 在当前位置添加标记
    mapContext.addMarkers({
      markers: [{
        id: 1,
        latitude: this.data.latitude,
        longitude: this.data.longitude,
        iconPath: '/images/location.png', // 这里可以使用自己的标记图标
        width: 50,
        height: 50
      }]
    });
  }
});

4. 自定义标记图标

将自定义的标记图标图片 location.png 放到 images 文件夹下，并确保路径正确。

5. 运行与测试

在微信开发者工具中，选择 pages/index/index 页面进行预览和测试。

点击“获取当前位置”按钮，地图应该会显示当前位置，并在当前位置添加一个标记。

6. 注意事项

权限设置：

确保你在 app.json 或 manifest.json 文件中配置了正确的权限，例如位置权限。

在微信小程序的管理后台配置 location 权限请求。

API Key 保密：

尽量不要将 API Key 公开在代码中，建议使用环境变量或其他安全机制管理 API Key。