-
-
-
查询
-
+
+
+
+
+
-
- 经度
-
-
- 纬度
-
-
-
-
{{ dataForm.coordinatePosition }} -->
@@ -182,6 +171,7 @@
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'
+import daiMap from "@/utils/dai-map";
var map
var search
var markers
@@ -191,6 +181,11 @@ export default {
data () {
return {
formType: 'add', //表单操作类型 add新增,edit编辑,detail详情
+ searchOptions: [],
+ searchValue: '',
+ resultList: [],
+ loading: false,
+
btnDisable: false,
buildingId: '', //楼栋ID
buildType: "1",
@@ -204,7 +199,7 @@ export default {
totalUnitNum: 1,//单元数
totalFloorNum: 0,//层数
totalHouseNum: 0,//总户数
- realPerson: 0,
+ realPerson: 0,
buildingLeaderName: '',//楼长姓名
buildingLeaderMobile: '',//楼长电话
type: '',//房屋类型
@@ -223,12 +218,13 @@ export default {
},
components: {},
mounted () {
- this.initMap()
+
},
methods: {
async initForm (type, row, agencyObj) {
this.$refs.ref_form.resetFields();
+ let { latitude, longitude } = this.$store.state.user;
this.agencyObj = agencyObj
this.dataForm.agencyId = agencyObj.agencyId
this.dataForm.gridId = agencyObj.gridId
@@ -241,13 +237,16 @@ export default {
// this.buildType = this.dataForm.buildingTypeKey
this.buildType = this.dataForm.type
- map.setCenter(new TMap.LatLng(this.dataForm.latitude, this.dataForm.longitude))
- this.setMarker(this.dataForm.latitude, this.dataForm.longitude)
} else {
- map.setCenter(new TMap.LatLng(agencyObj.latitude, agencyObj.longitude))
+ this.dataForm.latitude = latitude
+ this.dataForm.longitude = longitude
+ }
+ if (!map) {
+ this.initMap(this.dataForm.latitude, this.dataForm.longitude);
+ } else {
+ map.setCenter(this.dataForm.latitude, this.dataForm.longitude);
+ map.setMarker(this.dataForm.latitude, this.dataForm.longitude);
}
-
-
},
async handleComfirm () {
@@ -266,7 +265,7 @@ export default {
})
},
- async handleCode() {
+ async handleCode () {
const { data, code, msg } = await requestPost(
"/gov/org/houseInformation/getBuildingCoding/" + this.dataForm.neighborHoodId);
console.log('data----', data)
@@ -275,8 +274,8 @@ export default {
if (msg == "success" && code == 0) {
this.dataForm.coding = data.coding
this.dataForm.sysCoding = data.sysCoding
-
- }
+
+ }
},
async addBuild () {
if (this.dataForm.buildingLeaderMobile) {
@@ -324,89 +323,91 @@ export default {
},
// 地图初始化函数,本例取名为init,开发者可根据实际情况定义
- initMap () {
- // 定义地图中心点坐标
- var center = new window.TMap.LatLng(36.0722275, 120.38945519)
- // 定义map变量,调用 TMap.Map() 构造函数创建地图
- map = new window.TMap.Map(document.getElementById('app'), {
- center: center, // 设置地图中心点坐标
- zoom: 17.2, // 设置地图缩放级别
- pitch: 43.5, // 设置俯仰角
- rotation: 45 // 设置地图旋转角度
- })
+ initMap (latitude, longitude) {
- search = new window.TMap.service.Search({ pageSize: 10 })
- // 新建一个地点搜索类
- markers = new TMap.MultiMarker({
- map: map,
- geometries: []
- })
- infoWindowList = Array(10)
+ map = new daiMap(
+ document.getElementById("app_build"),
+ { latitude, longitude },
+ {
+ zoom: 16.2, // 设置地图缩放级别
+ pitch: 43.5, // 设置俯仰角
+ rotation: 45, // 设置地图旋转角度
+ }
+ );
// 监听地图平移结束
- map.on('panend', () => {
- this.handleMoveCenter()
- })
- this.handleMoveCenter()
+ map.on("dragend", (e) => {
+ this.handleMoveCenter(e);
+ });
+
+ map.setCenter(latitude, longitude);
+ map.setMarker(latitude, longitude);
+
},
- setMarker (lat, lng) {
- markers.setGeometries([])
- markers.add([
- {
- id: '4',
- styleId: 'marker',
- position: new TMap.LatLng(lat, lng),
- properties: {
- title: 'marker4'
- }
- }
- ])
+
+ async handleMoveCenter () {
+ //修改地图中心点
+ const { lat, lng } = map.getCenter();
+ this.dataForm.latitude = lat;
+ this.dataForm.longitude = lng;
+ map.setMarker(lat, lng);
+
+ let { msg, data } = await map.getAddress(lat, lng);
+ if (msg == "success") {
+ this.dataForm.coordinatePosition = data.address
+ this.searchValue = data.address
+ this.searchOptions = []
+
+ }
},
- handleSearchMap () {
- infoWindowList.forEach((infoWindow) => {
- infoWindow.close()
- })
- infoWindowList.length = 0
- markers.setGeometries([])
- // 在地图显示范围内以给定的关键字搜索地点
- search
- .searchNearby({
- keyword: this.keyWords,
- radius: 1000,
- autoExtend: true,
- center: map.getCenter(),
- })
- .then((result) => {
- let { data } = result
- if (Array.isArray(data) && data.length > 0) {
- const {
- location: { lat, lng },
- address
- } = data[0]
- map.setCenter(new TMap.LatLng(lat, lng))
- this.setMarker(lat, lng)
- this.dataForm.latitude = lat
- this.dataForm.longitude = lng
- this.dataForm.coordinatePosition = address
- } else {
- this.$message.error('未检索到相关位置坐标')
+ async remoteMethod (query) {
+
+ if (query !== '') {
+ this.loading = true;
+
+ const { msg, data } = await map.searchNearby(query);
+ this.loading = false;
+ this.resultList = []
+
+ if (msg == "success" && data.resultList && data.resultList.length > 0) {
+
+ if (data.resultList && data.resultList.length > 0) {
+ this.resultList = data.resultList
+ this.searchOptions = this.resultList.map(item => {
+ return { value: `${item.hotPointID}`, label: `${item.address + item.name}` };
+
+ });
}
- })
+ } else {
+ this.searchOptions = [
+ {
+ value: '0',
+ label: '未检索到结果'
+ }
+ ]
+ }
+ } else {
+ this.searchOptions = [];
+ }
},
- handleMoveCenter () {
- //修改地图中心点
- const center = map.getCenter()
- const lat = center.getLat()
- const lng = center.getLng()
- this.dataForm.latitude = lat
- this.dataForm.longitude = lng
- this.setMarker(lat, lng)
+ handleClickKey (index) {
+ let selPosition = this.resultList[index]
+ let lonlat = selPosition.lonlat.split(" ")
+ map.setCenter(lonlat[1], lonlat[0]);
+ map.setMarker(lonlat[1], lonlat[0]);
+ this.dataForm.latitude = lonlat[1];
+ this.dataForm.longitude = lonlat[0];
+ this.dataForm.coordinatePosition = selPosition.address + selPosition.name
},
+
+
resetData () {
- this.keyWords = ''
+ this.searchValue = ''
+ this.searchOptions = []
+ this.resultList = []
this.buildingId = '' //楼栋ID
this.buildType = '1'
this.dataForm = {
diff --git a/src/views/modules/base/community/communityDetail.vue b/src/views/modules/base/community/communityDetail.vue
index 26367608e..f08478197 100644
--- a/src/views/modules/base/community/communityDetail.vue
+++ b/src/views/modules/base/community/communityDetail.vue
@@ -52,7 +52,7 @@
地图位置:
@@ -73,6 +73,7 @@
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'
+import daiMap from "@/utils/dai-map";
var map
var search
var markers
@@ -117,7 +118,7 @@ export default {
},
diaDestroy () {
if (map) {
- map.destroy()
+ // map.destroy()
}
},
@@ -132,19 +133,8 @@ export default {
this.dataForm.propertyShow = propertyShowList.join(',')
this.initLoading = true
-
- this.$nextTick(() => {
- this.initMap()
- })
-
- },
-
- // 地图初始化函数,本例取名为init,开发者可根据实际情况定义
- initMap () {
- // 定义地图中心点坐标
let { latitude, longitude } = this.$store.state.user;
console.log('lat' + latitude + ',lon' + longitude)
-
if (this.dataForm.latitude && this.dataForm.longitude) {
latitude = this.dataForm.latitude
longitude = this.dataForm.longitude
@@ -153,81 +143,40 @@ export default {
latitude = 39.9088810666821;
longitude = 116.39743841556731;
}
- // 定义地图中心点坐标
- var center = new window.TMap.LatLng(latitude, longitude);
- // 定义map变量,调用 TMap.Map() 构造函数创建地图
- map = new window.TMap.Map(document.getElementById('app_detail'), {
- center: center, // 设置地图中心点坐标
- zoom: 17.2, // 设置地图缩放级别
- pitch: 43.5, // 设置俯仰角
- rotation: 45 // 设置地图旋转角度
- })
- search = new window.TMap.service.Search({ pageSize: 10 })
- // 新建一个地点搜索类
- markers = new TMap.MultiMarker({
- map: map,
- geometries: []
- })
- infoWindowList = Array(10)
+ this.$nextTick(() => {
+ if (!map) {
+ this.initMap(latitude, longitude)
+ } else {
+ map.setCenter(latitude, longitude);
+ map.setMarker(latitude, longitude);
+ }
- // 监听地图平移结束
- map.on('panend', () => {
- this.handleMoveCenter()
})
- this.handleMoveCenter()
+
},
- setMarker (lat, lng) {
- markers.setGeometries([])
- markers.add([
+ // 地图初始化函数,本例取名为init,开发者可根据实际情况定义
+ initMap (latitude, longitude) {
+
+ map = new daiMap(
+ document.getElementById("app_detail_community"),
+ { latitude, longitude },
{
- id: '4',
- styleId: 'marker',
- position: new TMap.LatLng(lat, lng),
- properties: {
- title: 'marker4'
- }
+ zoom: 16.2, // 设置地图缩放级别
+ pitch: 43.5, // 设置俯仰角
+ rotation: 45, // 设置地图旋转角度
}
- ])
- },
+ );
- handleSearchMap () {
- infoWindowList.forEach((infoWindow) => {
- infoWindow.close()
- })
- infoWindowList.length = 0
- markers.setGeometries([])
- // 在地图显示范围内以给定的关键字搜索地点
- search
- .searchRectangle({
- keyword: this.keyWords,
- bounds: map.getBounds()
- })
- .then((result) => {
- let { data } = result
- if (Array.isArray(data) && data.length > 0) {
- const {
- location: { lat, lng }
- } = data[0]
- map.setCenter(new TMap.LatLng(lat, lng))
- this.setMarker(lat, lng)
- this.dataForm.latitude = lat
- this.dataForm.longitude = lng
- } else {
- this.$message.error('未检索到相关位置坐标')
- }
- })
- },
+ // // 监听地图平移结束
+ // map.on("dragend", (e) => {
+ // this.handleMoveCenter(e);
+ // });
+
+ map.setCenter(latitude, longitude);
+ map.setMarker(latitude, longitude);
- handleMoveCenter () {
- //修改地图中心点
- const center = map.getCenter()
- const lat = center.getLat()
- const lng = center.getLng()
- this.dataForm.latitude = lat
- this.dataForm.longitude = lng
- this.setMarker(lat, lng)
},
diff --git a/src/views/modules/base/community/communityForm.vue b/src/views/modules/base/community/communityForm.vue
index 13f0437a2..9a0d1418c 100644
--- a/src/views/modules/base/community/communityForm.vue
+++ b/src/views/modules/base/community/communityForm.vue
@@ -42,22 +42,22 @@