在 index.html 页面中 引入 地图
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script>
在vue组件中:
调用:
this.getLocation(name);
// 获取当前地址的经纬度坐标
async getLocation(address) {
try {
const point = await this.getPointByAddress(address);
this.center = { lng: point.lng, lat: point.lat };
this.itemTableData.location = { lat: point.lat, lng: point.lng };
this.itemTableData.icon = this.centericon;
this.points.push(this.itemTableData);
} catch (error) {
console.error(error);
}
},
// 根据地址名称获取经纬度坐标
getPointByAddress(address) {
// 创建地理编码实例
const myGeo = new BMap.Geocoder();
return new Promise((resolve, reject) => {
// 对地址进行地理编码
myGeo.getPoint(
address,
point => {
if (point) {
// 地理编码成功，返回经纬度坐标对象
resolve(point);
} else {
// 地理编码失败
reject("地理编码失败");
}
},
"上海"
);
});
}页面完整代码:
<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="企业名称" prop="enterpriseName">
<el-input
v-model="queryParams.enterpriseName"
placeholder="请输入企业名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<!-- <el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['basic:basicMap:add']"
>新增</el-button>
</el-col>-->
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['basic:basicMap:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['basic:basicMap:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['basic:basicMap:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="basicMapList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="统一社会信用代码" align="center" prop="creditCode" />
<el-table-column label="企业名称" align="center" prop="enterpriseName" />
<el-table-column label="注册地址" align="center" prop="registeredDistrict" />
<el-table-column label="经营地址" align="center" prop="businessAddress" />
<el-table-column label="辐射范围" align="center" prop="radiationRange" />
<el-table-column label="数据来源" align="center" prop="dataSource">
<template slot-scope="scope">
<dict-tag
:options="dict.type.industrial_chain_links"
:value="scope.row.industryChainValue"
/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-search"
@click="handleUpdate(scope.row)"
v-hasPermi="['basic:basicMap:edit']"
>查看</el-button>
<el-button
v-if="scope.row.collectStatus != '1'"
size="mini"
type="text"
icon="el-icon-edit"
@click="handleCollect(scope.row)"
v-hasPermi="['basic:basicMap:edit']"
>收藏</el-button>
<el-button
v-if="scope.row.monitorStatus != '1'"
size="mini"
type="text"
icon="el-icon-edit"
@click="handleMap(scope.row,'monitor')"
v-hasPermi="['basic:basicMap:edit']"
>监控</el-button>
<el-button
v-if="scope.row.monitorStatus == '1'"
size="mini"
type="text"
icon="el-icon-edit"
@click="handleMap(scope.row,'cancelMonitor')"
v-hasPermi="['basic:basicMap:edit']"
>取消监控</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleTuoke(scope.row)"
v-hasPermi="['basic:basicMap:edit']"
>地图拓客</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改地图拓客对话框开始 -->
<el-dialog :title="title" :visible.sync="updateOpen" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="统一社会信用代码" prop="creditCode">
<el-input v-model="form.creditCode" placeholder="请输入统一社会信用代码" />
</el-form-item>
<el-form-item label="企业名称" prop="enterpriseName">
<el-input v-model="form.enterpriseName" placeholder="请输入企业名称" />
</el-form-item>
<el-form-item label="注册地址" prop="registeredDistrict">
<el-input v-model="form.registeredDistrict" placeholder="请输入注册地址" />
</el-form-item>
<el-form-item label="经营地址" prop="businessAddress">
<el-input v-model="form.businessAddress" placeholder="请输入经营地址" />
</el-form-item>
<el-form-item label="辐射范围" prop="radiationRange">
<el-input v-model="form.radiationRange" placeholder="请输入辐射范围" />
</el-form-item>
<el-form-item label="数据来源" prop="dataSource">
<el-select v-model="form.industryChain" placeholder="请选择产业链">
<el-option
v-for="dict in dict.type.data_source"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="附件" prop="file">
<file-upload v-model="form.file" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 添加或修改地图拓客对话框结束 -->
<!-- 地图拓客对话框开始 -->
<el-dialog :title="title" :visible.sync="tuokeOpen" width="600px" append-to-body>
<div class="map">
<baidu-map
class="center"
:center="center"
:zoom="zoom"
style="height: 100%"
:map-click="false"
:scroll-wheel-zoom="true"
>
<bm-marker
v-for="(marker, index) in points"
:key="index"
:position="{ lng: marker.location.lng, lat: marker.location.lat }"
:icon="{
url: marker.icon.img,
size: { width: marker.icon.width, height: marker.icon.height },
}"
@click="lookDetail(marker,index)"
></bm-marker>
<bm-circle
v-if="center"
:center="center"
:radius="radius"
stroke-color="#EC4141"
:stroke-weight="2"
fillColor
></bm-circle>
</baidu-map>
</div>
<!-- 内层弹窗开始 -->
<el-dialog width="500px" title="公司信息" :visible.sync="innerVisible" append-to-body>
<el-form ref="innerform" :model="innerform" label-width="90px">
<el-form-item label="统一社会信用代码" class="xydm" prop="creditCode">
<el-input v-model="innerform.creditCode" placeholder="请输入统一社会信用代码" />
</el-form-item>
<el-form-item label="企业名称" prop="enterpriseName">
<el-input v-model="innerform.enterpriseName" placeholder="请输入企业名称" />
</el-form-item>
<el-form-item label="注册地址" prop="registeredDistrict">
<el-input v-model="innerform.registeredDistrict" placeholder="请输入注册地址" />
</el-form-item>
<el-form-item label="经营地址" prop="businessAddress">
<el-input v-model="innerform.businessAddress" placeholder="请输入经营地址" />
</el-form-item>
<el-form-item label="辐射范围" prop="radiationRange">
<el-input v-model="innerform.radiationRange" placeholder="请输入辐射范围,单位米" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleSave">保 存</el-button>
<el-button @click="innerCancel">取 消</el-button>
</div>
</el-dialog>
<!-- 内层弹窗结束 -->
<div slot="footer" class="dialog-footer">
<el-button @click="cancelTuoke">关 闭</el-button>
</div>
</el-dialog>
<!-- 地图拓客对话框开始 -->
</div>
</template>
<script>
import {
listBasicMap,
getBasicMap,
delBasicMap,
addBasicMap,
updateBasicMap,
collectBasicMap,
cancelCollectBasicMap,
monitorBasicMap,
cancelMonitorBasicMap
} from "@/api/basic/basicMap";
import {
BmMarker,
BmlMarkerClusterer,
BmDriving,
BmLabel,
BmlHeatmap,
BaiduMap
} from "vue-baidu-map";
import { collect, basicMap } from "@/api/basic/basicTarget";
export default {
name: "BasicMap",
dicts: ["data_source"],
components: {
BaiduMap,
BmlMarkerClusterer,
BmMarker,
BmDriving,
BmLabel,
BmlHeatmap
},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 地图拓客表格数据
basicMapList: [],
//百度地图数据开始
// 弹出层标题
title: "",
updateOpen: false, // 是否显示弹出层
tuokeOpen: false, //拓客 弹出层
points: [],
center: null,
radius: null, // 圆圈范围半径 半径，单位为米
zoom: 18, //3-19级
baiduicon: {
img: require("@/assets/images/dt.png"),
width: 70,
height: 70
},
centericon: {
img: require("@/assets/images/dt.png"),
width: 50,
height: 50
},
//百度地图数据结束
itemTableData: null, //点击表格每一行保存的数据
innerVisible: false, //内层弹窗
innerform: {
id: null,
creditCode: null,
enterpriseName: null,
registeredDistrict: null,
businessAddress: null,
radiationRange: null
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
creditCode: null,
enterpriseName: null,
collectStatus: null,
monitorStatus: null,
isDel: null,
registeredDistrict: null,
businessAddress: null,
radiationRange: null
},
// 表单参数
form: {},
// 表单校验
rules: {
id: [{ required: true, message: "$comment不能为空", trigger: "blur" }]
}
};
},
created() {
this.getList();
},
methods: {
/** 查询地图拓客列表 */
getList() {
this.loading = true;
listBasicMap(this.queryParams).then(response => {
this.basicMapList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.updateOpen = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
creditCode: null,
enterpriseName: null,
collectStatus: null,
monitorStatus: null,
isDel: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
registeredDistrict: null,
businessAddress: null,
radiationRange: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.updateOpen = true;
this.title = "添加地图拓客";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getBasicMap(id).then(response => {
this.form = response.data;
this.updateOpen = true;
this.title = "修改地图拓客";
});
},
//地图拓客 开始
handleTuoke(row) {
this.resetDialog();
if (row.radiationRange) {
this.itemTableData = row;
this.tuokeOpen = true;
this.title = "地图拓客";
let name = row.enterpriseName;
let range = row.radiationRange;
this.radius = range;
this.getLocation(name);
basicMap(name, range).then(response => {
let arr = response.data.results;
arr.forEach(element => {
element.icon = this.baiduicon;
this.points.push(element);
});
console.log(this.points, "this.points11111111111111");
});
} else {
this.$message({
message: "请点击修改按钮,设置辐射范围",
type: "warning"
});
// this.$modal.msgSuccess("请点击修改按钮,设置辐射范围");
}
},
cancelTuoke() {
this.tuokeOpen = false;
this.getList();
// this.reset();
},
resetInnerform() {
this.innerform = {
id: null,
creditCode: null,
enterpriseName: null,
registeredDistrict: null,
businessAddress: null,
radiationRange: null
};
},
lookDetail(marker, index) {
let obj = this.points[index];
// console.log(obj, "11111111111111");
this.innerVisible = true;
this.resetInnerform();
this.innerform.creditCode = obj.creditCode; //统一社会信用代码
this.innerform.enterpriseName = obj.enterpriseName || obj.name; //企业名称
this.innerform.registeredDistrict = obj.registeredDistrict || obj.address; //注册地址
this.innerform.businessAddress = obj.businessAddress; //经营地址
this.innerform.radiationRange = obj.radiationRange; //辐射范围
},
handleSave() {
this.$refs["innerform"].validate(valid => {
if (valid) {
if (this.innerform.id != null) {
updateBasicMap(this.innerform).then(response => {
this.$modal.msgSuccess("修改成功");
this.innerVisible = false;
});
} else {
addBasicMap(this.innerform).then(response => {
this.$modal.msgSuccess("新增成功");
this.innerVisible = false;
});
}
}
});
},
innerCancel() {
this.innerVisible = false;
},
resetDialog() {
this.title = "";
this.updateOpen = false; // 是否显示弹出层
this.tuokeOpen = false; //拓客 弹出层
this.points = [];
this.center = null;
this.radius = null; // 圆圈范围半径 半径，单位为米
this.zoom = 18; //3-19级
this.itemTableData = null;
},
//地图拓客 结束
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateBasicMap(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.updateOpen = false;
this.getList();
});
} else {
addBasicMap(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.updateOpen = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal
.confirm('是否确认删除地图拓客编号为"' + ids + '"的数据项？')
.then(function() {
return delBasicMap(ids);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"basic/basicMap/export",
{
...this.queryParams
},
`basicMap_${new Date().getTime()}.xlsx`
);
},
/** 收藏及监控等操作*/
handleMap(row, choose) {
const ids = row.id || this.ids;
switch (choose) {
case "collect":
this.$modal
.confirm('是否收藏编号为"' + ids + '"的数据项？')
.then(function() {
return collectBasicMap(row);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("收藏成功");
})
.catch(() => {});
break;
case "cancelCollect":
this.$modal
.confirm('是否取消收藏编号为"' + ids + '"的数据项？')
.then(function() {
return cancelCollectBasicMap(row);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("取消成功");
})
.catch(() => {});
break;
case "monitor":
this.$modal
.confirm('是否监控编号为"' + ids + '"的数据项？')
.then(function() {
return monitorBasicMap(row);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("监控成功");
})
.catch(() => {});
break;
case "cancelMonitor":
this.$modal
.confirm('是否取消监控编号为"' + ids + '"的数据项？')
.then(function() {
return cancelMonitorBasicMap(row);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("取消成功");
})
.catch(() => {});
break;
}
},
handleCollect(row) {
this.$modal
.confirm("是否收藏数据项？")
.then(function() {
return collect(row.enterpriseName, "2");
})
.then(() => {
this.getList();
this.$modal.msgSuccess("收藏成功");
});
},
// 获取当前地址的经纬度坐标
async getLocation(address) {
try {
const point = await this.getPointByAddress(address);
this.center = { lng: point.lng, lat: point.lat };
this.itemTableData.location = { lat: point.lat, lng: point.lng };
this.itemTableData.icon = this.centericon;
this.points.push(this.itemTableData);
} catch (error) {
console.error(error);
}
},
// 根据地址名称获取经纬度坐标
getPointByAddress(address) {
// 创建地理编码实例
const myGeo = new BMap.Geocoder();
return new Promise((resolve, reject) => {
// 对地址进行地理编码
myGeo.getPoint(
address,
point => {
if (point) {
// 地理编码成功，返回经纬度坐标对象
resolve(point);
} else {
// 地理编码失败
reject("地理编码失败");
}
},
"上海"
);
});
}
}
};
</script>
<style scoped lang="scss">
.map {
height: 500px;
width: 560px;
}
.el-dialog__body {
padding: 10px 15px;
}
.xydm {
v-deep .el-form-item__label {
line-height: 21px !important;
}
}
</style>
<style>
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
.xydm .el-form-item__label {
line-height: 21px !important;
}
</style>
5669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
