功能优化
This commit is contained in:
parent
21dbf53b40
commit
9e602bbddc
|
|
@ -9,14 +9,9 @@
|
|||
<title><%= webpackConfig.name %></title>
|
||||
<!-- <script src="<%= BASE_URL %>/static/map/map_load.js" type="text/javascript"></script>-->
|
||||
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
|
||||
<!-- <script async src="https://api.map.baidu.com/api?v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>-->
|
||||
<!-- <script src="https://api.map.baidu.com/api?type=webgl&v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>-->
|
||||
<!-- <script type="text/javascript" src="https://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>-->
|
||||
<!-- <script async src="http://10.1.0.142:2000/api.map.baidu.com/api?v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>-->
|
||||
<!-- <script src="http://10.1.0.142:2000/api.map.baidu.com/getscript?v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>-->
|
||||
<!-- http://192.168.1.100/api.map.baidu.com/getscript?v=2.0&ak=你的key&services=&t=20170104214439-->
|
||||
<!-- <script src="http://10.1.0.142:2000/mybaidu/api?type=webgl&v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>-->
|
||||
<!-- <script type="text/javascript" src="http://10.1.0.142:2000/mybaidu/library/TrackAnimation/src/TrackAnimation_min.js"></script>-->
|
||||
<script async src="http://10.1.0.142:2000/api.map.baidu.com/api?v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
|
||||
<script src="http://10.1.0.142:2000/api.map.baidu.com/api?type=webgl&v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
|
||||
<script type="text/javascript" src="http://10.1.0.142:2000/api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
|
|
|
|||
|
|
@ -105,6 +105,36 @@
|
|||
|
||||
<!-- 添加或修改部门对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
|
||||
|
||||
<!-- 内层对话框 选择地图 -->
|
||||
<el-dialog
|
||||
width="70%"
|
||||
title="选择地图"
|
||||
:visible.sync="innerVisible"
|
||||
v-if="innerVisible"
|
||||
append-to-body
|
||||
>
|
||||
<el-row class="search-container">
|
||||
<el-input
|
||||
clearable
|
||||
placeholder="请输入地址"
|
||||
v-model="searchAddress"
|
||||
@keyup.enter.native="onSearchAddress"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
style="width: 120px"
|
||||
@click="onSearchAddress"
|
||||
>搜索</el-button
|
||||
>
|
||||
</el-row>
|
||||
<div
|
||||
id="map-container"
|
||||
style="height: 550px; background-color: #bfc"
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="24" v-if="form.parentId !== 0">
|
||||
|
|
@ -192,8 +222,23 @@
|
|||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleProjectAddress"
|
||||
>选择位置</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="经度" prop="lon">
|
||||
<el-input disabled v-model="form.lon" />
|
||||
</el-form-item>
|
||||
<el-form-item label="纬度" prop="lat">
|
||||
<el-input disabled v-model="form.lat" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="位置" prop="address">
|
||||
<el-input v-model="form.address" placeholder="请输入位置" maxlength="50"/>
|
||||
<el-input
|
||||
v-model="form.address"
|
||||
disabled
|
||||
style="width: 60%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -244,6 +289,9 @@ export default {
|
|||
components: { Treeselect },
|
||||
data() {
|
||||
return {
|
||||
innerVisible: false,
|
||||
map: null,
|
||||
searchAddress: '',
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
|
|
@ -270,7 +318,11 @@ export default {
|
|||
isDepartmentList:[{id:'0',name:'否'},{id:'1',name:'是'}],
|
||||
provinceList:["北京","上海","天津","重庆","河北","山西","内蒙古","辽宁","吉林","黑龙江","江苏","浙江","安徽","福建","江西","山东","河南","湖北","湖南","广东","广西","海南","四川","贵州","云南","西藏","陕西","甘肃","宁夏","青海","新疆","香港","澳门","台湾"],
|
||||
// 表单参数
|
||||
form: {},
|
||||
form: {
|
||||
lon: '',
|
||||
lat: '',
|
||||
address: '',
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
parentId: [
|
||||
|
|
@ -323,7 +375,7 @@ export default {
|
|||
/** 人员选择下拉 */
|
||||
getPersonSelect() {
|
||||
getPersonSelect().then(response => {
|
||||
this.personOptions=response.data
|
||||
this.personOptions = response.data
|
||||
// console.log(this.personOptions)
|
||||
});
|
||||
},
|
||||
|
|
@ -481,7 +533,89 @@ export default {
|
|||
// 提交上传文件
|
||||
submitFileForm() {
|
||||
this.$refs.upload.submit();
|
||||
}
|
||||
},
|
||||
/** 选择工程地址 */
|
||||
handleProjectAddress() {
|
||||
const this_ = this;
|
||||
this.searchAddress = '';
|
||||
this.innerVisible = true;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this_.map = new BMapGL.Map('map-container'); // 创建地图实例
|
||||
let point;
|
||||
if (this_.form.lon != null && this_.form.lon !== '' && this_.form.lat != null && this_.form.lat !== '') {
|
||||
console.log(this_.form.lat, this_.form.lon);
|
||||
point = new BMapGL.Point(this_.form.lon, this_.form.lat);
|
||||
let marker = new BMapGL.Marker(point); // 创建标点
|
||||
this_.map.addOverlay(marker);
|
||||
} else {
|
||||
point = new BMapGL.Point(117.13805, 31.8734); // 创建点坐标
|
||||
}
|
||||
|
||||
this_.map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别
|
||||
this_.map.enableScrollWheelZoom(true); // 启用滚轮放大缩小
|
||||
|
||||
// 禁用不必要的功能
|
||||
// this_.map.disableDragging(); // 禁用拖拽
|
||||
this_.map.disableDoubleClickZoom(); // 禁用双击缩放
|
||||
this_.map.disablePinchToZoom(); // 禁用多点触控缩放
|
||||
this_.map.disableKeyboard(); // 禁用键盘操作
|
||||
|
||||
var geoc = new BMapGL.Geocoder();
|
||||
|
||||
this_.map.addEventListener('click', function (e) {
|
||||
var pt = e.latlng;
|
||||
geoc.getLocation(pt, function (res) {
|
||||
var addComp = res.addressComponents;
|
||||
this_.form.address = `${addComp.province}${addComp.city}${addComp.district}${addComp.street}${addComp.streetNumber}`;
|
||||
this_.form.lon = e.latlng.lng;
|
||||
this_.form.lat = e.latlng.lat;
|
||||
});
|
||||
this_.map.clearOverlays();
|
||||
point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
|
||||
let marker = new BMapGL.Marker(point); // 创建标点
|
||||
this_.map.addOverlay(marker);
|
||||
});
|
||||
});
|
||||
},
|
||||
/* 搜索 */
|
||||
onSearchAddress() {
|
||||
|
||||
// 创建地址
|
||||
const myGeo = new BMapGL.Geocoder()
|
||||
const _this = this
|
||||
myGeo.getPoint(
|
||||
this.searchAddress,
|
||||
function (point) {
|
||||
if (point) {
|
||||
_this.map.clearOverlays()
|
||||
const {lng, lat} = point
|
||||
|
||||
_this.map.centerAndZoom(point, 16)
|
||||
_this.map.addOverlay(
|
||||
new BMapGL.Marker(point, {
|
||||
title: _this.searchAddress,
|
||||
}),
|
||||
)
|
||||
// 根据坐标得到地址描述
|
||||
myGeo.getLocation(
|
||||
new BMapGL.Point(lng, lat),
|
||||
function (result) {
|
||||
if (result) {
|
||||
let addComp = result.addressComponents
|
||||
_this.form.address = `${addComp.province}${addComp.city}${addComp.district}${addComp.street}${addComp.streetNumber}`
|
||||
_this.form.lon = lng
|
||||
_this.form.lat = lat
|
||||
}
|
||||
},
|
||||
)
|
||||
} else {
|
||||
this.$message.error('您输入的地址有误，请重新输入')
|
||||
}
|
||||
},
|
||||
'中国',
|
||||
)
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue