From 80180a24c767b2cf4c05a49f7428a473e9a7d66c Mon Sep 17 00:00:00 2001 From: dai <851733175@qq.com> Date: Mon, 24 Oct 2022 10:39:26 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A4=BE=E5=8C=BA=E8=87=AA=E7=BB=84=E7=BB=87?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/dai-map.js | 17 +-- .../modules/communityService/dqfwzx/index.vue | 51 ++------ .../communityService/sqzzz/cpts/edit.vue | 110 +++++------------- src/views/modules/cpts/base/cpts/edit.vue | 8 +- 4 files changed, 55 insertions(+), 131 deletions(-) diff --git a/src/utils/dai-map.js b/src/utils/dai-map.js index c138ffb6a..ffcba7838 100644 --- a/src/utils/dai-map.js +++ b/src/utils/dai-map.js @@ -1,8 +1,9 @@ import nextTick from "dai-js/tools/nextTick"; +export const mapType = typeof window.TMap !== "undefined" ? "qq" : "td"; + // 封装了地图相关函数，兼容天地图、腾讯地图常用api export default function init(ele, position, params) { - const mapType = typeof window.TMap !== "undefined" ? "qq" : "td"; this.mapType = mapType; this.map = null; this.marker = null; @@ -14,7 +15,7 @@ export default function init(ele, position, params) { }; }; this.setCenter = function (lat, lng) {}; - this.setMarker = function (lat, lng) {}; + this.setMarker = function (lat, lng, title) {}; this.getAddress = async function (lat, lng) {}; this.searchNearby = async function (keyword) {}; this.on = function (eventType, fn) {}; @@ -51,7 +52,7 @@ export default function init(ele, position, params) { this.map.setCenter(new QQMap.LatLng(lat, lng)); }; - this.setMarker = function (lat, lng) { + this.setMarker = function (lat, lng, title = "位置") { this.markers.setGeometries([]); this.markers.add([ { @@ -59,7 +60,7 @@ export default function init(ele, position, params) { styleId: "marker", position: new QQMap.LatLng(lat, lng), properties: { - title: "marker4", + title, }, }, ]); @@ -103,8 +104,6 @@ export default function init(ele, position, params) { const { location: { lat, lng, address }, } = data[0]; - this.setCenter(lat, lng); - this.setMarker(lat, lng); reslove({ msg: "success", data: { @@ -159,10 +158,12 @@ export default function init(ele, position, params) { this.map.panTo(new TDMap.LngLat(lng, lat)); }; - this.setMarker = function (lat, lng) { + this.setMarker = function (lat, lng, title = "位置") { let lnglat = new TDMap.LngLat(lng, lat); if (!this.marker) { - this.marker = new TDMap.Marker(lnglat, {}); + this.marker = new TDMap.Marker(lnglat, { + title, + }); this.map.addOverLay(this.marker); } else { this.marker.setLngLat(lnglat); diff --git a/src/views/modules/communityService/dqfwzx/index.vue b/src/views/modules/communityService/dqfwzx/index.vue index 8173f6524..0ebe2dc7c 100644 --- a/src/views/modules/communityService/dqfwzx/index.vue +++ b/src/views/modules/communityService/dqfwzx/index.vue @@ -162,12 +162,9 @@ import { mapGetters } from "vuex"; import editForm from "./cpts/edit"; import orderForm from "./cpts/order"; import orderList from "./cpts/orderList"; +import daiMap from "@/utils/dai-map"; var map; -var search; -var markers; -var infoWindowList; -let loading; // 加载动画 export default { components: { editForm, orderForm, orderList }, @@ -207,49 +204,25 @@ export default { methods: { // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 initMap() { - // 定义地图中心点坐标 - var center = new window.TMap.LatLng(36.0722275, 120.38945519); - // 定义map变量，调用 TMap.Map() 构造函数创建地图 - map = new window.TMap.Map(document.getElementById("centerIndexApp"), { - center: center, // 设置地图中心点坐标 - zoom: 17.2, // 设置地图缩放级别 - pitch: 43.5, // 设置俯仰角 - rotation: 45, // 设置地图旋转角度 - }); + let { latitude, longitude } = this.$store.state.user; - search = new window.TMap.service.Search({ pageSize: 10 }); - // 新建一个地点搜索类 - markers = new TMap.MultiMarker({ - map: map, - geometries: [], - }); - infoWindowList = Array(10); - }, - - setMarker(lat, lng, centerName) { - markers.setGeometries([]); - markers.add([ + map = new daiMap( + document.getElementById("centerIndexApp"), + { latitude, longitude }, { - id: "911", - styleId: "marker", - position: new TMap.LatLng(lat, lng), - properties: { - title: centerName, - }, - }, - ]); - }, - - setCenter(lat, lng) { - map.setCenter(new window.TMap.LatLng(lat, lng)); + zoom: 16.2, // 设置地图缩放级别 + pitch: 43.5, // 设置俯仰角 + rotation: 45, // 设置地图旋转角度 + } + ); }, setMap() { const { tableData, currentIndex } = this; let item = tableData[currentIndex]; if (item) { - this.setCenter(item.latitude, item.longitude); - this.setMarker(item.latitude, item.longitude, item.centerName); + map.setCenter(item.latitude, item.longitude); + map.setMarker(item.latitude, item.longitude, item.centerName); } }, diff --git a/src/views/modules/communityService/sqzzz/cpts/edit.vue b/src/views/modules/communityService/sqzzz/cpts/edit.vue index 01ba67f11..7ba58877d 100644 --- a/src/views/modules/communityService/sqzzz/cpts/edit.vue +++ b/src/views/modules/communityService/sqzzz/cpts/edit.vue @@ -251,6 +251,7 @@ import { Loading } from "element-ui"; // 引入Loading服务 import { requestPost } from "@/js/dai/request"; import formVltHelper from "dai-js/tools/formVltHelper"; import nextTick from "dai-js/tools/nextTick"; +import daiMap from "@/utils/dai-map"; var map; var search; @@ -390,100 +391,51 @@ export default { organizationPersonnel.splice(index, 1); this.dataForm.organizationPersonnel = organizationPersonnel; }, + // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 initMap() { let { latitude, longitude } = this.$store.state.user; - if (!latitude || latitude == "" || latitude == "0") { - 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"), { - center: center, // 设置地图中心点坐标 - zoom: 16.2, // 设置地图缩放级别 - pitch: 43.5, // 设置俯仰角 - rotation: 45, // 设置地图旋转角度 - }); - - search = new window.TMap.service.Search({ pageSize: 10 }); - // 新建一个地点搜索类 - markers = new TMap.MultiMarker({ - map: map, - geometries: [], - }); - infoWindowList = Array(10); - geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 + map = new daiMap( + document.getElementById("app"), + { latitude, longitude }, + { + zoom: 16.2, // 设置地图缩放级别 + pitch: 43.5, // 设置俯仰角 + rotation: 45, // 设置地图旋转角度 + } + ); // 监听地图平移结束 - map.on("panend", (e) => { + map.on("moveend", (e) => { this.handleMoveCenter(e); }); - // this.handleMoveCenter(); }, - setMarker(lat, lng) { - markers.setGeometries([]); - markers.add([ - { - id: "4", - styleId: "marker", - position: new TMap.LatLng(lat, lng), - properties: { - title: "marker4", - }, - }, - ]); - }, - - handleSearchMap() { - infoWindowList.forEach((infoWindow) => { - infoWindow.close(); - }); - infoWindowList.length = 0; - markers.setGeometries([]); - // 在地图显示范围内以给定的关键字搜索地点 - search - .searchNearby({ - keyword: this.dataForm.address, - radius: 1000, - autoExtend: true, - center: map.getCenter(), - }) - .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("未检索到相关位置坐标"); - } - }); + async handleSearchMap() { + const { msg, data } = await map.searchNearby(this.dataForm.address); + if (msg == "success") { + const { lat, lng } = data; + map.setCenter(lat, lng); + map.setMarker(lat, lng); + this.dataForm.latitude = lat; + this.dataForm.longitude = lng; + } else { + this.$message.error("未检索到相关位置坐标"); + } }, - handleMoveCenter(e) { - console.log(e); + async handleMoveCenter(e) { + console.log("handleMoveCenter", e); //修改地图中心点 - const center = map.getCenter(); - const lat = center.getLat(); - const lng = center.getLng(); + const { lat, lng } = map.getCenter(); this.dataForm.latitude = lat; this.dataForm.longitude = lng; - this.setMarker(lat, lng); + map.setMarker(lat, lng); - if (e && e.originalEvent) { - geocoder - .getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址 - .then((result) => { - this.dataForm.address = result.result.address; - }); + let { msg, data } = await map.getAddress(lat, lng); + if (msg == "success") { + this.dataForm.address = data.address; } }, @@ -498,7 +450,7 @@ export default { await nextTick(800); if (map) { - map.setCenter(new TMap.LatLng(row.latitude, row.longitude)); + map.setCenter(row.latitude, row.longitude); } } }, diff --git a/src/views/modules/cpts/base/cpts/edit.vue b/src/views/modules/cpts/base/cpts/edit.vue index fbee77de3..554c29191 100644 --- a/src/views/modules/cpts/base/cpts/edit.vue +++ b/src/views/modules/cpts/base/cpts/edit.vue @@ -645,9 +645,8 @@ export default { const { msg, data } = await map.searchNearby(this.fmData[item.keyName]); if (msg == "success") { const { lat, lng } = data; - // map.setCenter(lat, lng); - // map.setMarker(lat, lng); - + map.setCenter(lat, lng); + map.setMarker(lat, lng); this.fmData[item.supKeys[0]] = lng; this.fmData[item.supKeys[1]] = lat; } else { @@ -659,8 +658,7 @@ export default { console.log("handleMoveCenter", e); //修改地图中心点 const { lat, lng } = map.getCenter(); - // item.supValues[0] = lng; - // item.supValues[1] = lat; + this.fmData[item.supKeys[0]] = lng; this.fmData[item.supKeys[1]] = lat; map.setMarker(lat, lng);