uniapp中用腾讯地图,如何实现根据在后端查到的很多经纬度的信息,在地图上显示多个点标记
时间: 2024-03-29 12:34:12 浏览: 125
百度地图API获取单击获取点击的经纬度,可实现打点标记
3星 · 编辑精心推荐
要在uniapp中使用腾讯地图,需要先在页面中引入腾讯地图的 JavaScript API,并在页面中创建一个地图容器。然后,可以通过调用腾讯地图提供的 API,在地图上添加多个点标记。下面是一个简单的示例代码:
```html
<template>
<view class="map-container">
<map :style="{width: '100%', height: '100%'}" :center.sync="center" :markers="markers" />
</view>
</template>
<script>
export default {
data() {
return {
center: {longitude: 116.397428, latitude: 39.90923},
markers: []
}
},
mounted() {
// 从后端获取经纬度信息
this.getLatLngs().then(latLngs => {
// 将经纬度信息转换为腾讯地图的标记对象
const markers = latLngs.map(latLng => ({
id: latLng.id,
latitude: latLng.latitude,
longitude: latLng.longitude,
title: latLng.name,
iconPath: '/static/marker.png'
}))
// 将标记对象添加到地图上
this.markers = markers
})
},
methods: {
// 从后端获取经纬度信息
getLatLngs() {
return new Promise(resolve => {
// 这里假设后端返回的数据格式为 [{id:1, name:'北京', longitude:116.397428, latitude:39.90923}, {...}, ...]
const data = [{id:1, name:'北京', longitude:116.397428, latitude:39.90923}, {...}, ...]
resolve(data)
})
}
}
}
</script>
```
在上面的代码中,我们首先在页面中创建一个地图容器,并将地图的中心点和标记数组绑定到了组件的 data 中。在页面加载完成后,我们调用了一个自定义的方法 getLatLngs 从后端获取经纬度信息,并将经纬度信息转换为腾讯地图的标记对象。然后,将标记对象添加到了地图上,这样就可以在地图上显示多个点标记了。
在上面的代码中,我们使用了一个静态的图片作为标记的图标,你也可以使用动态的图标,具体可以参考腾讯地图的 API 文档。
阅读全文