vue-baidu-map标记多个位置经纬度坐标点

一、下载依赖

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-pickerv-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"borderstyle="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-dialogv-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 datadatas: 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=falsethis.title = ''this.center.lng = ''this.center.lat = ''},goMap(row) {
    this.aaa = truethis.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// newthis.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.lngthis.center.lat = e.point.lat},search() {
    this.page.currentPage = 1this.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.listimport('@/vendor/Export2Excel').then(excel => {
    const tHeader = ['区域', '场馆名称', '检查时间', '检查结果', '检查员', '工单', '更新时间']const filterVal = ['district', 'address_name', 'check_date', 'check_status', 'check_name', 'work_order_id', 'update_time']const list = alistconst 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.listlet pages = {
    totalCount: Number(res.data.count),pageCount: Math.ceil(Number(res.data.count) / this.page.perPage),currentPage: this.page.currentPage,perPage: 20}this.page = pagesthis.startIndex = (this.page.currentPage - 1) * this.page.perPage + 1}})},handleSizeChange(val) {
    console.log(`每页 ${
      val} 条`);},handleCurrentChange(val) {
    this.page.currentPage = valthis.jianchaData()},mockinitData() {
    this.imgurl = checkerdetail.data.imgurlthis.name = checkerdetail.data.namethis.gender = checkerdetail.data.genderthis.id_card = checkerdetail.data.id_cardthis.mobile = checkerdetail.data.mobilethis.address = checkerdetail.data.addressthis.cer_num = checkerdetail.data.cer_numthis.get_time = checkerdetail.data.get_timethis.cer_status = checkerdetail.data.cer_status},mockjianchaData() {
    this.jiancha_list = jianchalist.data.listlet 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.listlet 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.imgurlthis.name = checkerdetail.data.namethis.gender = checkerdetail.data.genderthis.id_card = checkerdetail.data.id_cardthis.mobile = checkerdetail.data.mobilethis.address = checkerdetail.data.addressthis.cer_num = checkerdetail.data.cer_numthis.get_time = checkerdetail.data.get_timethis.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多点显示
四、效果图