小程序从后台拿来多个经纬度使用markers标注到地图上
时间: 2024-02-03 15:12:57 浏览: 68
微信小程序之获取经纬度显示在地图上
4星 · 用户满意度95%
你可以在小程序后台拿到多个经纬度,然后使用 `map` 组件的 `markers` 属性将这些标记添加到地图上。以下是一个示例代码,假设你已经从后台拿到了一个数组 `locations`,其中每个元素都包含了一个 `latitude` 和 `longitude` 属性,表示一个地点的经纬度:
```
<map latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}"></map>
```
在页面的 `onLoad` 函数中,你可以将这些地点转换为 `markers` 数组,然后将其赋值给 `map` 组件的 `markers` 属性。示例代码如下:
```
Page({
data: {
latitude: 39.90469, // 地图初始中心点的经纬度
longitude: 116.40717,
markers: []
},
onLoad: function() {
// 假设从后台拿到了一个名为 locations 的数组,其中每个元素包含了一个 latitude 和 longitude 属性
const locations = [
{ latitude: 39.90469, longitude: 116.40717 },
{ latitude: 40.71278, longitude: -74.00594 },
{ latitude: 51.50722, longitude: -0.12775 }
];
// 将每个地点转换为一个 marker 对象,并添加到 markers 数组中
const markers = locations.map((location, index) => ({
id: index,
latitude: location.latitude,
longitude: location.longitude,
title: `地点${index + 1}`
}));
// 将 markers 数组设置为页面数据的 markers 属性
this.setData({ markers });
}
});
```
在这个示例代码中,我们首先在页面数据中定义了一个空的 `markers` 数组。在页面加载时,我们将从后台拿到的地点数组 `locations` 转换为 `markers` 数组,并将其设置为页面数据的 `markers` 属性。在转换过程中,我们使用 `map` 函数将每个地点转换为一个 marker 对象,其中 `id` 属性表示标记的唯一标识,`latitude` 和 `longitude` 属性表示标记的经纬度,`title` 属性表示标记的标题。最后,我们将 `markers` 数组赋值给 `map` 组件的 `markers` 属性,完成标记的添加。
阅读全文