cnpm install vue-amap -S // 安装项目依赖
项目 main.js里面：
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
// 配置
VueAMap.initAMapApiLoader({
key: 'c800ea593e4d8138cfe450b2c672d002', // 在高德开放平台上申请的 web Pc端 key
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.TruckDriving', 'AMap.Geolocation'],
// 默认高德 sdk 版本为 1.4.4
v: '1.4.4'
})
<style>
.amap-demo {
height: 400px;
}
</style>
<template>
<el-row>
<el-col :span="24">
<div>
<el-amap vid="amapDemo" :center="center" :plugin="plugin" ref="map" class="amap-demo" style="height: 400px;">
<el-amap-marker v-for="(item,index) in computedCarList" :position="item.marker" :key="index">
<div>{{item.nowVolume}}/{{item.maxVolume}}</div>
<div>
<svg class="icon" aria-hidden="true" style="font-size:30px;" @click="handler(item)">
<use xlink:href="#icon-dituche-copy-copy" v-if="Number(item.nowVolume) === Number(item.maxVolume)"></use>
<use xlink:href="#icon-dituche-copy" v-if="Number(item.nowVolume) === 0"></use>
<use xlink:href="#icon-dituche" v-if="Number(item.nowVolume) < Number(item.maxVolume) && Number(item.nowVolume) !== 0"></use>
</svg>
</div>
</el-amap-marker>
</el-amap>
<div class="toolbar" style="width:100%;height: 100px;margin-top:20px;border:1px solid rebeccapurple">
<!--<span v-if="loaded">-->
<!--location: lng = {{ lng }} lat = {{ lat }}-->
<!--</span>-->
<!--<span v-else>正在定位.......</span>-->
<p>
<span>此车的信息：<span class="font-red">{{text}}</span></span>
</p>
</div>
</div>
</el-col>
</el-row>
</template>
<script>
// import {AMapManager} from 'vue-amap'
// center: [104.066351, 30.552302],
export default {
data() {
let self = this
return {
lng: 0,
lat: 0,
maxTimes: 100,
nowTime: 1,
loaded: false,
text: '',
minNum: parseInt(Math.random() * 0.00001) + 1,
maxNum: parseInt(Math.random() * 0.00009) + 1,
// slotStyle: {
// color: 'red'
// },
window: '',
windows: [],
// 以当前帐号登录IP所在城市为地图默认城市,初始值可任意
center: [121.5273285, 31.21515044],
// Geolocation定位服务插件
plugin: [{
pName: 'Geolocation',
events: {
init(o) {
// o 是高德地图定位插件实例
o.getCurrentPosition((status, result) => {
if (result && result.position) {
self.lng = result.position.lng
self.lat = result.position.lat
self.center = [self.lng, self.lat] // 获取到当前ip所在经纬度并覆盖初始值
self.loaded = true
self.$nextTick()
}
})
}
}
}],
carList: []
}
},
created() {
// 模拟请求接口 返回来的车辆信息后 回调
this.mockCarList().then(response => {
if (response.success) {
this.carList = response.data
}
})
this.setTime()
},
computed: {
computedCarList() {
return this.carList.map(v => {
v.marker = [v.jin, v.wei]
// 仅把经纬度组合成一个 新添加的键marker的值
// 并未改变其原数据
return v
})
}
},
methods: {
// mock 首次请求来的后端数据
mockCarList() {
return new Promise((resolve, reject) => {
setTimeout(resolve({
success: true,
data: [
{carId: '001', jin: '104.065731', wei: '30.657478', nowVolume: 20, maxVolume: '50'}, // 天府广场
{carId: '002', jin: '104.073863', wei: '30.695643', nowVolume: 35, maxVolume: '50'}, // 火车北站
{carId: '003', jin: '103.961983', wei: '30.676526', nowVolume: 0, maxVolume: '50'}, // 市妇女儿童中心医院
{carId: '004', jin: '104.066071', wei: '30.573197', nowVolume: 50, maxVolume: '50'} // 市政府
]
}), 2000)
})
},
// 点击选择某车，弹出该车的相关信息this.text
handler(item) {
this.text = item
// 模拟移动: 点击某车，该车移动多少经纬度0.00009
item.jin = parseFloat(item.jin) + 0.00009
item.wei = parseFloat(item.wei) + 0.00009
console.log(item.jin, item.wei)
},
setTime() {
setTimeout(() => {
// 监听后端更新推送来的新数据(后端会10分钟更新推送一次新的定位)，
// 前端监听消息服务器，给其对应的carId赋上新的经纬度（即实现了运动）
// 若返回来的carId跟已有的carId没有对应关系,则为新的一个车：新给地图新追加一个车辆 和经纬度
Promise.resolve({carId: '005', jin: '104.065731', wei: '30.657478', nowVolume: 20, maxVolume: '50'}).then(item => {
const thisCar = this.carList.filter(v => v.carId === item.carId) // 找到其对应的carId
if (thisCar.length >= 1) {
thisCar.forEach(item => {
this.$set(item, 'jin', parseFloat(item.jin) + 0.00009)
this.$set(item, 'wei', parseFloat(item.wei) + 0.00009)
})
} else { // 如果没有对应的carId,则新给地图新追加一个车辆 和经纬度
this.carList.push(item)
}
})
console.log('setTimeout')
this.nowTime++
if (this.nowTime < this.maxTimes) {
this.setTime()
}
}, 1000) // 每一秒钟 经纬度 +0.00009，即实现了模拟运动
}
}
}
</script>
---------------------
作者：一波又起
来源：CSDN
原文：https://blog.csdn.net/qq_37126704/article/details/86528500
|
|
收藏
淘帖
踩
