uniapp如何实现高德地图的点亮城市功能

在uniapp中想实现类似高德地图的"点亮城市"功能，就是根据用户定位或手动选择来标记去过哪些城市。目前遇到几个问题：1.如何调用高德地图API获取城市边界数据？2.怎么在地图上绘制不同城市的选中状态？3.用户数据如何存储在本地？求一个完整的实现思路或示例代码，最好能支持多平台运行。

2 回复

使用uniapp实现高德地图点亮城市功能，步骤如下：

  1. 引入高德地图SDK，在manifest.json中配置地图插件
  2. 创建地图组件，初始化地图实例
  3. 获取用户访问过的城市坐标数据
  4. 使用AMap.Marker在地图上添加标记点
  5. 可配合不同图标区分已点亮/未点亮状态
  6. 使用覆盖物组管理多个标记点

核心代码：

// 添加标记点
new AMap.Marker({
    position: [116.39, 39.9],
    icon: '已点亮图标',
    map: mapInstance
})

在 UniApp 中实现高德地图的“点亮城市”功能，可以通过以下步骤完成：

1. 集成高德地图 SDK

  • 在 UniApp 项目中引入高德地图插件（如 uniapp-amap 或官方高德地图 JS API）。
  • 在 manifest.json 中配置高德地图的 AppKey。

2. 初始化地图

使用高德地图 API 创建地图实例，并设置中心点和缩放级别。

// 在页面中引入高德地图（需提前配置 SDK）
const map = new AMap.Map('map-container', {
  zoom: 10,
  center: [116.397428, 39.90923] // 默认中心点（北京）
});

3. 标记城市位置

通过 AMap.Marker 添加标记到地图上，表示已点亮的城市。

// 添加标记
const marker = new AMap.Marker({
  position: [116.397428, 39.90923], // 城市经纬度
  title: '北京',
  map: map
});

4. 存储点亮状态

使用本地存储（如 uni.setStorageSync）记录用户已点亮的城市列表。

// 点亮城市时保存数据
let litCities = uni.getStorageSync('litCities') || [];
if (!litCities.includes('北京')) {
  litCities.push('北京');
  uni.setStorageSync('litCities', litCities);
}

5. 显示点亮效果

根据存储的数据动态加载标记，例如遍历城市列表并添加对应标记。

// 加载已点亮的城市
const litCities = uni.getStorageSync('litCities') || [];
litCities.forEach(city => {
  // 根据城市名称获取经纬度（需提前准备城市坐标数据）
  const position = getCityPosition(city); // 自定义函数
  new AMap.Marker({
    position: position,
    map: map
  });
});

6. 交互功能

添加点击事件，让用户手动点亮当前城市：

// 地图点击事件
map.on('click', (e) => {
  const cityName = reverseGeocode(e.lnglat); // 逆地理编码获取城市名
  if (cityName && !litCities.includes(cityName)) {
    // 添加标记并保存
    litCities.push(cityName);
    uni.setStorageSync('litCities', litCities);
    addMarker(e.lnglat, cityName); // 添加新标记
  }
});

注意事项：

  • 城市数据：需要准备城市名称与经纬度的映射表。
  • 逆地理编码：使用高德逆地理编码 API 将点击的坐标转换为城市名称。
  • 性能优化：如果城市数量多，建议使用 MarkerCluster 进行聚合显示。

通过以上步骤，即可在 UniApp 中实现高德地图的点亮城市功能。

回到顶部