地图
<template>
<div class="maps">
<baidu-map
class="map"
:scroll-wheel-zoom="true"
:center="center"
v-if="show"
:zoom="zoom"
@ready="handler"
@moving="syncCenterAndZoom"
@moveend="syncCenterAndZoom"
@zoomend="syncCenterAndZoom">
<car
v-for="(item,index) in carlist" :key="index"
:position="{lng: item.lng, lat: item.lat}"
:active="item.active"
:item="item"
@mouseover.native="active = true"
@mouseleave.native="active = false">
</car>
<gongsi
v-for="(item,index) in list" :key="index"
:position="{lng: item.lng, lat: item.lat}"
:item="item"
@mouseover.native="active = true"
@mouseleave.native="active = false">
</gongsi>
</baidu-map>
</div>
</template>
<script>
import {getCarPosition, getOrgPosition} from "../api/api/user";
import {mapGetters} from 'vuex';
import car from './mapover/car'
import gongsi from './mapover/gongsi'
export default {
name: "bdmap",
components: {car, gongsi},
props: {
id: {
type: String,
default() {
return '';
}
}
},
data() {
return {
carData: [],
orgData: [],
center: {
lng: 106.404,
lat: 39.915
},
zoom: 8,
show: false,
listOrg: [],
carlist: []
}
},
computed: mapGetters(['companyid']),
watch: {
companyid() {
this.getdata()
this.getcardata()
}
},
mounted() {
this.getdata()
this.getcardata()
},
methods: {
syncCenterAndZoom(e) {
const {lng, lat} = e.target.getCenter()
this.center.lng = lng
this.center.lat = lat
this.zoom = e.target.getZoom()
},
handler({
BMap,
map
}) {
let mapStyle = {style: 'midnight'}
map.setMapStyle(mapStyle)
},
getdata() {
var that = this
getOrgPosition().then(function (res) {
var data = res.data
that.list = []
data.forEach((type, index) => {
type.properties.forEach((type2, index2) => {
var data = {
lng: type.coordinates[index2][0],
lat: type.coordinates[index2][1],
orgId: type2[0],
orgName: type2[1],
imgPath: type2[2],
describe: type2[3],
website: type2[4],
offLine: type.offLine,
onLine: type.onLine
}
that.list.push(data)
});
});
that.center.lng = that.list[0].lng
that.center.lat = that.list[0].lat
that.show = true
console.log(that.list)
console.log('ceshi123')
// res.data.carData.coordinates.forEach((type, index) => {
// console.log(type[1])
// console.log(type[0])
// var data = {
// lat: type[1],
// lng: type[0],
// num: res.data.carData.properties[index][0],
// carNum: res.data.carData.properties[index][1],
// createTime: res.data.carData.properties[index][2],
// isonline: res.data.carData.properties[index][3]
// }
// that.carData.push(data)
// });
})
},
getcardata() {
var that = this
getCarPosition().then(function (res) {
var data = res.data
that.carlist = []
data.forEach((type, index) => {
if (type.properties) {
type.properties.forEach((type2, index2) => {
var data = {
lng: type.coordinates[index2][0],
lat: type.coordinates[index2][1],
num: type2[0],
carNum: type2[1],
createTime: type2[2],
isonline: type2[3],
offLine: type.offLine,
onLine: type.onLine,
}
that.carlist.push(data)
});
}
});
console.log(that.carlist)
console.log('ceshi123')
// res.data.carData.coordinates.forEach((type, index) => {
// console.log(type[1])
// console.log(type[0])
// var data = {
// lat: type[1],
// lng: type[0],
// num: res.data.carData.properties[index][0],
// carNum: res.data.carData.properties[index][1],
// createTime: res.data.carData.properties[index][2],
// isonline: res.data.carData.properties[index][3]
// }
// that.carData.push(data)
// });
})
},
}
}
</script>
<style lang="scss" scoped>
.maps {
position: relative;
width: 100%;
height: 100%;
}
.map {
position: relative;
width: 100%;
height: 100%;
}
</style>
组件
<template>
<bm-overlay
ref="customOverlay"
pane="markerShadow"
:class="{active}"
class="overlay"
@draw="draw">
<div class="overx" :style="{'margin-top':top+'px','margin-left':left+'px',}">
<img class="shexiangtou2" ref="overx" @click="handleClick" src="../../assets/icon_gongsi.png" alt="">
<div class="mappopwin" v-show="show">
<img class="close" @click="show=false" src="../../assets/icon_close.png" alt="">
<h3>公司简介：{{ item.orgName }}</h3>
<img :src="urls + item.imgPath" alt="">
<div class="desc"><p>{{ item.describe }}</p></div>
<a class="seemore" :href="item.website" target="_blank">查看更多 >></a>
</div>
</div>
</bm-overlay>
</template>
<script>
export default {
props: ['text', 'position', 'active', 'item', 'name', 'img', 'desc', 'url'],
watch: {
position: {
handler() {
this.$refs.customOverlay.reload()
},
deep: true
},
item: {
handler() {
this.$refs.customOverlay.reload()
let height = this.$refs.overx.offsetHeight;
let width = this.$refs.overx.offsetWidth;
this.top = -height
this.left = -(width / 2)
},
deep: true
},
},
data() {
return {
show: false,
urls: 'http://h.jids.cn',
top: 0,
left: 0
}
},
mounted() {
let height = this.$refs.overx.offsetHeight;
let width = this.$refs.overx.offsetWidth;
this.top = -height
this.left = -(width / 2)
},
methods: {
handleClick() {
this.show = !this.show
},
draw({
el,
BMap,
map
}) {
const {
lng,
lat
} = this.position
console.log('经纬度')
console.log(lng)
console.log(lat)
const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
el.style.left = pixel.x - 0 + 'px'
el.style.top = pixel.y - 0 + 'px'
}
}
}
</script>
<style lang="scss" scoped>
.sample {
overflow: hidden;
color: #fff;
text-align: center;
position: absolute;
}
.overlay {
background-size: 100% 100%;
position: absolute;
color: #fff;
font-size: 0px;
}
.overlay .overx {
position: relative;
}
.mapnum {
width: 18px;
height: 18px;
background: #009944;
border: 1px solid #FFFFFF;
border-radius: 50%;
position: absolute;
left: 25px;
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
top: -0px;
}
.mapnum.active {
width: 18px;
height: 18px;
background: #009944;
border: 1px solid #FFFFFF;
border-radius: 50%;
position: absolute;
left: 10px;
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
top: -5px;
}
.ceshi {
color: red !important;
}
.overlay.active .overx .mapnum {
background: red !important;
}
.mappopwin {
background: url("../../assets/gongsipop.png") no-repeat;
background-size: 100% 100%;
width: 400px;
height: 409px;
position: absolute;
left: -400px;
top: -390px;
display: flex;
z-index: 100000;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
.close {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
width: 14px;
height: 14px;
}
h3 {
font-size: 14px;
font-family: PingFang;
font-weight: bold;
color: #FFFFFF;
margin: 0 auto;
padding: 0;
width: 340px;
text-align: left;
margin-top: 40px;
}
img {
width: 340px;
height: 180px;
margin-top: 10px;
margin-bottom: 20px;
}
.desc {
font-size: 12px;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #FFFFFF;
height: 100px;
width: 340px;
overflow: hidden;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: nowrap;
flex-direction: column;
text-align: left;
p {
text-align: left;
width: 100%;
}
}
}
.shexiangtou1 {
width: 21px;
}
.shexiangtou2 {
width: 27px;
position: relative;
z-index: 10;
}
.seemore {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
font-size: 14px;
font-family: PingFang;
font-weight: 500;
color: #00C0FF;
text-decoration: none;
width: 320px;
margin: 0 auto;
text-indent: -10px;
}
</style>
