一、下载依赖
npm install vue-baidu-map --save
二、引入main.js
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: 'QgfFilqeUDxC0ajamorweqrwu'
})
ak 是在百度地图开发者平台申请的密钥。详情
三、使用
<template>
<div>
<router-view></router-view>
<div>
<div>
<el-card class="box-card">
<el-row>
<el-col :span='6' style="margin-top:10px;">检查员记录</el-col>
<el-col :span='6' style="margin-top:10px;float:right;">
<el-button size="medium" @click="$router.back(-1)" style="float: right;">返回</el-button>
</el-col>
</el-row>
<el-row>
<el-col :span='6' style="margin-top:10px;">姓名：{
{
datas.name}}</el-col>
<el-col :span='6' style="margin-top:10px;">手机号：{
{
datas.mobile}}</el-col>
<el-col :span='6' style="margin-top:10px;">辖区：{
{
datas.area_code}}</el-col>
<el-col :span='6' style="margin-top:10px;">检查证编号：{
{
datas.certificates_code}}</el-col>
</el-row>
</el-card>
<el-card class="box-card">
<el-form ref="searchForm" :model="searchForm" label-width="80px">
<el-col>
<el-form-item label="时间">
<el-date-picker
v-model="timearray"
style="margin-right: 10px;"
size="small"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col>
<el-form-item style="display:flex; justify-content:center;">
<el-button size="small" type="primary" @click="search" style="margin:0 15px 15px 0">搜索</el-button>
<el-button size="small" style="margin:0" @click="initSearch">重置</el-button>
<el-button size="small" @click="handleExport()" >导出</el-button>
</el-form-item>
</el-col>
</el-form>
<el-table
:data="jiancha_list"
border
style="width: 100%">
<el-table-column
:index="startIndex"
type="index"
label="序号">
</el-table-column>
<el-table-column prop="district" label="区域" align="center">
</el-table-column>
<el-table-column prop="address_name" label="场馆名称" align="center">
</el-table-column>
<el-table-column prop="check_date" label="检查时间" align="center">
</el-table-column>
<el-table-column label="检查地点" align="center" width="150px">
<template slot-scope="scope">
<span v-if="scope.row.longitude == '0.000000' && scope.row.latitude == '0.000000'">--</span>
<el-button v-else size="small" @click="goMap(scope.row)">查看地点</el-button>
</template>
</el-table-column>
<el-table-column prop="check_status" label="检查结果" align="center">
</el-table-column>
<el-table-column prop="check_name" label="检查员" align="center">
</el-table-column>
<el-table-column prop="work_order_id" label="工单" align="center" width="250px">
<template slot-scope="scope">
<span v-if="scope.row.work_order_id">
<el-button size="small" @click="showUserDetail(scope.row.work_order_id)">{
{
scope.row.work_order_num}}</el-button>
</span>
<span v-else>
--
</span>
</template>
</el-table-column>
<el-table-column prop="update_time" label="更新时间" align="center">
</el-table-column>
<el-table-column label="操作" align="center" width="150px">
<template slot-scope="scope">
<el-button size="small" @click="viewExamOrder(scope.row.id)">查看详情</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="page.currentPage"
:page-size="page.perPage"
layout="total, prev, pager, next"
:total="page.totalCount">
</el-pagination>
</el-card>
<el-dialog
v-if="aaa"
class="reg-form"
title="地图"
:visible.sync="value"
width="60%"
:before-close="handleClose"
>
<baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:600px" @click="getClickInfo" :scroll-wheel-zoom='true'>
<!-- <bm-marker :position="center" :dragging="true" :title="title">
<bm-label :content="title" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: -85, height: 20}"/>
</bm-marker> -->
<bm-marker v-for="(item,index) in mapObj"
:key="index"
:position="item">
<bm-label :content="item.title"
:labelStyle="{color: 'red', fontSize : '20px'}"
:offset="{width: -35, height: 30}" />
</bm-marker>
</baidu-map>
</el-dialog>
</div>
</div>
</div>
</template>
<script>
// import { getCheckerList, addChecker, updateChecker, getCheckerDetail } from '@/api/peoplemanage'
import {
getCheckerList, addChecker, updateChecker, deleteChecker, sendPwd, addBatchChecker, getCheckuserList } from '@/api/peoplemanage'
import {
checkerlist, checkerdetail, jianchalist, peixunlist} from '@/api/mockdata'
export default {
components: {
},
// inject: ['reload'],
// props: {
// mapObj: Array,//结构[{ lng: '', lat: '',title:''}]
// showMap: Boolean,
// },
data() {
return{
public_group: '公开组',
total_row: '总计',
exam_id: this.$route.params.examid,
group_list: [],
exam_type: 0,
exam_status: 0,
publish: true,
apply_start_time: 0,
apply_end_time: 0,
edit_group_list: [],
group_payment_options:[{
value: 1,
label: '协会收款'
},{
value: 2,
label: '机构收款'
}],
group_type_options:[{
value: 1,
label: '公开组'
},{
value: 2,
label: '渠道组'
}],
id_lists: [],
edit:false,
// 考试发布中基本信息的填写表单
basicInfoForm:{
status: 0, // 1-发布；2-未发布
type: '',
active_start_time: '',
active_end_time: '',
},
// new data
datas: this.$route.params.datas,
page: {
totalCount: 1,
pageCount: 1,
currentPage: 1,
perPage: 20
},
imgurl: '',
name: '',
gender: '',
id_card: '',
mobile: '',
address: '',
cer_num: '',
get_time: '',
cer_status: '',
activeName: 'first',
jiancha_list: [],
peixun_list: [],
startIndex: '',
timearray: [],
value: false,
center: {
lng: '', lat: ''},
zoom: 13,
mapObj:[],
row_dict: {
},
searchForm: {
},
title: '',
content: '',
aaa: true
}
},
created() {
this.jianchaData()
},
computed:{
},
methods: {
handleClose(done) {
console.log('12121212')
this.aaa=false
this.title = ''
this.center.lng = ''
this.center.lat = ''
},
goMap(row) {
this.aaa = true
this.title = ''
this.center.lng = ''
this.center.lat = ''
// this.reload()
console.log('row'+JSON.stringify(row))
this.row_dict = row
// old
// this.title = this.row_dict.address_name
// this.center.lng = this.row_dict.longitude
// this.center.lat = this.row_dict.latitude
// new
this.mapObj = [
{
lng: this.row_dict.longitude,
lat: this.row_dict.latitude,
title: '检查员'
},
{
lng: this.row_dict.address_longitude,
lat: this.row_dict.address_latitude,
title: '场馆'
},
]
this.center = this.mapObj[0]
this.value = true
},
handler ({
BMap, map}) {
console.log('this.row_dict.address_name='+this.row_dict.address_name)
// this.title = this.row_dict.address_name
// this.center.lng = this.row_dict.longitude
// this.center.lat = this.row_dict.latitude
// var point = new BMap.Point(this.row_dict.longitude, this.row_dict.longitude.latitude)
// map.centerAndZoom(point, 16)
// var circle = new BMap.Circle(point, 10, { strokeColor: 'Red', strokeWeight: 10, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
// map.addOverlay(circle)
// var icon = new BMap.Icon("./../assets/aaa.jpeg", new BMap.Size(100, 100));
// var marker = new BMap.Marker(point,{icon: icon}) // 创建标注
// marker.addEventListener("click", (e) => {
// this.filterMarker(e.target.point, index);
// });
// map.addOverlay(marker) // 将标注添加到地图中
},
getClickInfo (e) {
console.log(e.point.lng)
console.log(e.point.lat)
this.center.lng = e.point.lng
this.center.lat = e.point.lat
},
search() {
this.page.currentPage = 1
this.jianchaData()
},
initSearch(){
this.timearray = [],
this.jianchaData()
},
// 处理批量导出
handleExport(){
let startdate = ''
let enddate = ''
if (this.timearray.length > 0) {
startdate = this.timearray[0]
enddate = this.timearray[1]
}
let query = {
user_channel_id: this.$route.params.datas.user_channel_id,
page_size: 999,
start_time: startdate,
end_time: enddate
}
getCheckuserList(query).then((res) => {
if(res.statusCode == 200){
let alist = res.data.list
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['区域', '场馆名称', '检查时间', '检查结果', '检查员', '工单', '更新时间']
const filterVal = ['district', 'address_name', 'check_date', 'check_status', 'check_name', 'work_order_id', 'update_time']
const list = alist
const data = this.formatJson(filterVal, list)
excel.export_json_to_excel({
header: tHeader,
data,
filename: '检查记录',
})
})
}
})
},
// 导出excel时将数据转换格式
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => {
if (j === 'timestamp') {
return parseTime(v[j])
} else {
return v[j]
}
}))
},
viewExamOrder(id){
this.$router.push({
name: 'Venuedetail', params: {
id: id } });
},
showUserDetail(id){
this.$router.push({
name: 'Memberdetail', params: {
id: id } });
},
jianchaData(){
let startdate = ''
let enddate = ''
if (this.timearray.length > 0) {
startdate = this.timearray[0]
enddate = this.timearray[1]
}
let query = {
user_channel_id: this.$route.params.datas.user_channel_id,
page: this.page.currentPage,
page_size: this.page.perPage,
start_time: startdate,
end_time: enddate
}
getCheckuserList(query).then((res) => {
if(res.statusCode == 200){
this.jiancha_list = res.data.list
let pages = {
totalCount: Number(res.data.count),
pageCount: Math.ceil(Number(res.data.count) / this.page.perPage),
currentPage: this.page.currentPage,
perPage: 20
}
this.page = pages
this.startIndex = (this.page.currentPage - 1) * this.page.perPage + 1
}
})
},
handleSizeChange(val) {
console.log(`每页 ${
val} 条`);
},
handleCurrentChange(val) {
this.page.currentPage = val
this.jianchaData()
},
mockinitData() {
this.imgurl = checkerdetail.data.imgurl
this.name = checkerdetail.data.name
this.gender = checkerdetail.data.gender
this.id_card = checkerdetail.data.id_card
this.mobile = checkerdetail.data.mobile
this.address = checkerdetail.data.address
this.cer_num = checkerdetail.data.cer_num
this.get_time = checkerdetail.data.get_time
this.cer_status = checkerdetail.data.cer_status
},
mockjianchaData() {
this.jiancha_list = jianchalist.data.list
let pages = {
totalCount: Number(jianchalist.data.count),
pageCount: Math.ceil(Number(jianchalist.data.count) / this.page.perPage),
currentPage: this.page.currentPage,
perPage: 20
}
this.page = pages
},
mockpeixunData() {
this.peixun_list = peixunlist.data.list
let pages = {
totalCount: Number(peixunlist.data.count),
pageCount: Math.ceil(Number(peixunlist.data.count) / this.page.perPage),
currentPage: this.page.currentPage,
perPage: 20
}
this.page = pages
},
// 设置组别报名已满
setGroupFull(id){
this.$confirm('您确定要进行设置已满操作吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() =>{
let query = {
id: id,
group_status: 1,
}
updateExamGroup(query)
this.$message({
type: 'success',
message: '成功设置已满!'
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
})
})
},
// 检查员详情数据
initData(){
let query = {
id: Number(this.$route.params.matchid)
}
getCheckerDetail(query).then((res) => {
if(res.status == 200){
this.imgurl = checkerdetail.data.imgurl
this.name = checkerdetail.data.name
this.gender = checkerdetail.data.gender
this.id_card = checkerdetail.data.id_card
this.mobile = checkerdetail.data.mobile
this.address = checkerdetail.data.address
this.cer_num = checkerdetail.data.cer_num
this.get_time = checkerdetail.data.get_time
this.cer_status = checkerdetail.data.cer_status
}
})
},
// 返回考试列表
goBack(){
this.$router.push({
name: 'Exampush'})
},
successMessage(msg) {
this.$message({
message: msg,
type: 'success'
});
},
warningMessage(msg) {
this.$message({
message: msg,
type: 'warning'
});
},
},
watch: {
},
}
</script>
<style scoped>
.box-card{
margin:20px;
}
.basic-info-status{
font-size: 15px;
border: 1px solid #09ceff;
padding: 4px;
color: #09ceff;
border-radius: 3px;
}
.align-center{
display:flex;
justify-content:center;
align-items:center;
}
.box-card{
margin:20px;
}
.userTable {
border-collapse: collapse;
margin: 0 auto;
text-align: center;
}
.userTable td,
.userTable th {
border: 1px solid #cad9ea;
color: #666;
height: 40px;
}
.userTable-header{
width:15%;
background-color: #f0f0f0;
}
.userTable-content{
width:35%
}
.el-col-24 {
width: auto;
}
.versionTip {
padding-top: 200px;
text-align: center;
}
.versionDiv {
text-align: left;
overflow: hidden;
}
.searchDiv{
position: relative;
height: 33px;
margin-bottom: 14px;
}
.uploadBtn {
position: absolute;
right: 0;
top: 0;
}
.item-list {
color: #4e4e4e;
font-size: 0;
margin-left: 3px;
margin-bottom: 25px;
}
.item-list li {
font-size: 12px;
display: inline-block;
vertical-align: middle;
}
.first-col {
width: 87px;
}
.version-info {
/* padding-left: 30px; */
padding-top: 30px;
}
.second-col {
width: 319px;
margin-right: 15px;
}
.second-col input[type='text'] {
width: 319px;
}
.el-input {
width: 319px;
}
.without-first-col {
margin-left: 90px;
margin-bottom: 27px;
font-size: 0;
}
#start_upload {
margin-top: -7px;
margin-right: 15px;
}
.first-col .note {
font-size: 11px;
color: #8b8b8b;
}
.with-textarea .first-col {
vertical-align: top;
}
#ter_num_list {
margin-top: -7px;
}
.without-first-col li {
font-size: 12px;
display: inline-block;
vertical-align: middle;
}
.ter-num {
margin-right: 6px;
margin-bottom: 10px;
font-size: 11px;
border: 1px solid #999;
padding: 6px 6px 6px 8px;
color: #4e4e4e;
}
.delTipsDiv {
text-align: center;
padding-top: 50px;
}
.warningNotifyAdd{
color: #007ac0;
text-decoration: underline
}
.el-radio.is-bordered + .el-radio.is-bordered {
margin-left: 0px;
margin-top: 7px;
}
</style>
Vue 百度地图baidu-map多点显示
四、效果图
