解剖 Uni-app 小程序地图添加动态多标点，秀出你的绝活

2022-11-24 01:50:31

在 Uni-app 小程序地图上展示多个动态标点：分步指南

引言

作为一名小程序开发者，您是否遇到过在地图上展示多个动态标点的难题？这份全面指南将为您提供分步说明和示例代码，帮助您轻松实现这一功能。

步骤 1：导入地图组件

在您的 Uni-app 项目中，通过以下步骤导入地图组件：

通过 npm 安装地图组件：npm install @uni/map --save
在 main.js 文件中引入组件：import map from '@uni/map'
在页面 components 选项中注册组件：

components: {
  map
}

步骤 2：获取头像图片

从后端获取用户头像图片并将其存储在 data 中：

data() {
  return {
    markers: []
  }
}

onLoad() {
  wx.request({
    url: 'YOUR_BACKEND_URL',
    success: (res) => {
      this.markers = res.data.markers;
    }
  })
}

步骤 3：配置地图选项

在 map 组件中，通过以下选项配置地图：

中心坐标：latitude 和 longitude
缩放级别：scale
显示类型：type

示例配置：

<map :latitude="39.90403" :longitude="116.40752" :scale="16" :type="1">
</map>

步骤 4：添加多标点

在 map 组件中，使用 markers 数组添加多个标点：

<map :markers="markers">
</map>

每个标点包含以下信息：

坐标：latitude 和 longitude
图标路径：iconPath
宽度：width
高度：height

步骤 5：设置动态效果

要实现动态效果，请设置标点的动画属性：

动画函数：animation.timingFunction
动画持续时间：animation.duration

示例动画配置：

{
  iconPath: '/assets/marker.png',
  width: 30,
  height: 30,
  latitude: 39.90403,
  longitude: 116.40752,
  title: '北京',
  animation: {
    timingFunction: 'easeIn',
    duration: 1000
  }
}