<template>
<div id="container">
</div>
</template>
<script>
import {findAll} from "@/api/email"
export default {
data(){
return {
latitudeAndLongitude:[]
}
},
mounted(){
this.loadWareHouse();
},
methods:{
async loadWareHouse(){
const res=await findAll();
console.log(res);
const wares=res.data
this.latitudeAndLongitude=wares.map(obj => [parseFloat(obj.longitude), parseFloat(obj.latitude)])
console.log(this.latitudeAndLongitude)
var map = new AMap.Map("container", {resizeEnable: true});
var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
for (var i = 0, marker; i < this.latitudeAndLongitude.length; i++) {
var marker = new AMap.Marker({
position: this.latitudeAndLongitude[i],
map: map
});
const MyContent='名称:'+wares[i].name+'<br>库存:'+wares[i].inventory+'<br>地址:'+wares[i].address
marker.content = MyContent;
marker.on('click', markerClick);
marker.emit('click', {target: marker});
}
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
map.setFitView();
}
}
}
</script>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>