vue中用高德地图根据后台返回的经纬度在地图上标记处这个点,代码展示
时间: 2023-02-06 14:07:47 浏览: 337
好的,我来为您展示如何在 Vue 中使用高德地图标记经纬度。
首先,您需要在项目中安装高德地图的 JavaScript SDK,可以使用 npm 安装:
```bash
npm install --save AMap
```
然后,在 Vue 组件中引入高德地图的 JavaScript SDK:
```javascript
import AMap from 'AMap'
```
接下来,您可以在组件的 mounted 钩子函数中初始化地图,并根据后台返回的经纬度在地图上标记出点:
```javascript
mounted () {
// 初始化地图
this.map = new AMap.Map('mapContainer', {
zoom: 11,
center: [116.397428, 39.90923]
})
// 获取后台返回的经纬度
const lng = this.point.lng
const lat = this.point.lat
// 在地图上标记点
const marker = new AMap.Marker({
position: [lng, lat]
})
marker.setMap(this.map)
}
```
在这段代码中,我们先使用 AMap.Map 类初始化地图,然后使用 AMap.Marker 类标记点。需要注意的是,高德地图的经纬度是以 [经度, 纬度] 的形式给出的,因此需要将经纬度值传入 AMap.Marker 类的 position 属性。
希望这些信息能帮到您!
阅读全文