第一步先npmcnpm i -S vue-baidu-map
第二步 在main.js
下添加下面的话 ak
自己申请
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: ""
})
第三步 下面代码功能介绍:左侧有一个树形菜单 点击菜单上的地址,地图上的红点会自动标志到相应位置 ,点击红点会出来一个弹框,可以任意写东西进去
<!--实时数据-地图-->
<template>
<div class="border">
<div class="tree">
<el-tree :data="datatree" :props="defaultProps" node-key="id" ref="tree" @node-click="handleCheck"> </el-tree> //我们左侧有一个树形菜单
</div>
<div style="width: 80%; margin-top: 0; height: 820px; float: left">
<!-- <weather class="weather" mode="tag" showBgImg></weather> -->
<baidu-map class="map" :center="{ lng: center.lng, lat: center.lat }" :zoom="zoom" scroll-wheel-zoom>
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
<bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
<bm-map-type
:map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
></bm-map-type>
<bm-marker :position="{ lng: center.lng, lat: center.lat }" @click="infoWindowOpen">
<bm-info-window :show="show" @close="infoWindowClose">
<div>{{this.SCName}}</div>
</bm-info-window>
</bm-marker>
</baidu-map>
</div>
</div>
</template>
<script>
export default {
name: "map",
data(){
return{
zoom: 15,
show: false,
label: '1111',
SCName: '',
userid: '',
ip: '',
tableData: [],
center: {
lng: 89.195574,
lat: 42.958251,
},
queryParam: [],
datatree: [],
defaultProps: {
children: 'children',
label: 'title',
},
}
},
mounted() {
this.ip = localStorage.getItem('IP');
this.userid = localStorage.getItem('USERID');
this.tree()
},
methods:{
tree() {
this.axios({
method: 'get',
url: this.ip + '',
params: {
userid:this.userid,
}
})
.then((res) => {
this.datatree = res.data.result
})
.catch((err) => {
console.log(err)
})
},
handleCheck(data) {
console.log(data.id)
this.show = false
this.SCName = data.title
this.axios({
method: 'post',
url:this.ip+''+data.id,
})
.then((res) => {
this.center.lat = res.data.result[0].lat
this.center.lng = res.data.result[0].lng
})
.catch((err) => {
console.log(err)
})
},
infoWindowOpen(marker) {
this.show = true
console.log("marker")
console.log(marker.target.point.lat)
console.log(marker.target.point.lng)
this.axios({
method: 'get',
url:this.ip+'',
params: {
lat:marker.target.point.lat,
lng:marker.target.point.lng,
}
})
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})
},
handleGet(scope){
console.log(scope)
},
infoWindowClose() {
this.show = false
},
onExpand(expandedKeys) {
console.log('onExpand', expandedKeys)
this.expandedKeys = expandedKeys
this.autoExpandParent = false
},
onCheck(checkedKeys) {
console.log('onCheck', checkedKeys)
this.checkedKeys = checkedKeys
},
onSelect(selectedKeys, info) {
console.log('onSelect', info)
this.selectedKeys = selectedKeys
},
}
}
</script>
<style scoped>
.border {
padding: 0;
}
.map {
width: 100%;
height: 100%;
margin-right: 0;
float: left;
margin-top: 0;
}
.tree {
width: 13%;
float: left;
height: 600px;
}
.el-tree {
position: relative;
cursor: default;
background: transparent;
/*color: #FFFFFF;*/
}
</style>