From 8bb34cb2a87044796dc8f3073825eac50416cc6c Mon Sep 17 00:00:00 2001 From: dai <851733175@qq.com> Date: Fri, 21 Oct 2022 17:07:24 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E4=B8=80=E6=AD=A5=E5=95=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/dai-map.js | 249 ++++++++++++++++++++-- src/views/modules/cpts/base/cpts/edit.vue | 107 +++------- 2 files changed, 254 insertions(+), 102 deletions(-) diff --git a/src/utils/dai-map.js b/src/utils/dai-map.js index 342ba3a56..960d13677 100644 --- a/src/utils/dai-map.js +++ b/src/utils/dai-map.js @@ -1,11 +1,227 @@ +// 封装了地图相关函数，兼容天地图、腾讯地图常用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; + this.markers = null; + this.getCenter = function () { + return { + lat: 0, + lng: 0, + }; + }; + this.setCenter = function (lat, lng) {}; + this.setMarker = function (lat, lng) {}; + this.getAddress = async function (lat, lng) {}; + this.searchNearby = async function (keyword) {}; + this.on = function (eventType, fn) {}; + + const QQMap = window.TMap; + const TDMap = window.T; + + let { latitude, longitude } = position; + if (!latitude || latitude == "" || latitude == "0") { + latitude = 39.9088810666821; + longitude = 116.39743841556731; + } + + if (mapType == "qq") { + let center = new QQMap.LatLng(latitude, longitude); + this.map = new QQMap.Map(ele, { + center, + ...params, + }); + + this.markers = new QQMap.MultiMarker({ + map: map, + geometries: [], + }); + + this.getCenter = function () { + const center = this.map.getCenter(); + const lat = center.getLat(); + const lng = center.getLng(); + return { lat, lng }; + }; + + this.setCenter = function (lat, lng) { + this.map.setCenter(new QQMap.LatLng(lat, lng)); + }; + + this.setMarker = function (lat, lng) { + this.markers.setGeometries([]); + this.markers.add([ + { + id: "4", + styleId: "marker", + position: new QQMap.LatLng(lat, lng), + properties: { + title: "marker4", + }, + }, + ]); + }; + + this.geocoder = new QQMap.service.Geocoder(); // 新建一个正逆地址解析类 + this.getAddress = async function (lat, lng) { + return new Promise((reslove) => { + this.geocoder + .getAddress({ location: new QQMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址 + .then((result) => { + reslove({ + msg: "success", + data: { + address: result.result.address, + }, + }); + }) + .catch((error) => { + reslove({ + msg: "failed", + error, + }); + }); + }); + }; + + this.search = new QQMap.service.Search(this.map, { pageSize: 10 }); + this.searchNearby = async function (keyword) { + return new Promise((reslove) => { + this.search + .searchNearby({ + keyword, + radius: 1000, + autoExtend: true, + center: this.map.getCenter(), + }) + .then((result) => { + let { data } = result; + if (Array.isArray(data) && data.length > 0) { + const { + location: { lat, lng, address }, + } = data[0]; + // this.setCenter(lat, lng); + // this.setMarker(lat, lng); + reslove({ + msg: "success", + data: { + lng, + lat, + address, + }, + }); + } else { + reslove({ + msg: "failed", + error: "未检索到相关位置坐标", + }); + } + }) + .catch((error) => { + reslove({ + msg: "failed", + error, + }); + }); + }); + }; + + this.on = function (eventType, fn) { + this.map.on(eventType, fn); + }; + } else { + let center = new TDMap.LngLat(longitude, latitude); + this.map = new TDMap.Map(ele, { + center, + ...params, + }); + + this.getCenter = function () { + const center = this.map.getCenter(); + const lat = center.getLat(); + const lng = center.getLng(); + return { lat, lng }; + }; + + this.setCenter = function (lat, lng) { + this.map.panTo(new TDMap.LngLat(lng, lat)); + }; + + this.setMarker = function (lat, lng) { + let lnglat = new TDMap.LngLat(lng, lat); + if (!this.marker) { + this.marker = new TDMap.Marker(lnglat, {}); + } else { + this.marker.setLngLat(lnglat); + } + }; + + this.geocoder = new TDMap.service.Geocoder(); // 新建一个正逆地址解析类 + this.getAddress = async function (lat, lng) { + return new Promise((reslove) => { + this.geocoder.getLocation( + { location: new TDMap.LatLng(lat, lng) }, + (result) => { + if (result) { + let status = result.getStatus(); + reslove({ + msg: "success", + data: { + address: result.getAddress(), + }, + }); + } else { + reslove({ + msg: "failed", + error: "解析失败", + }); + } + } + ); + }); + }; + + this.search = new TDMap.LocalSearch(this.map, { pageCapacity: 10 }); + this.searchNearby = async function (keyword) { + return new Promise((reslove) => { + this.search.setQueryType(1); + this.search.searchNearby(keyword, this.map.getCenter(), 1000); + + const result = this.search.getResults(); + const data = result.getPois(); + + if (Array.isArray(data) && data.length > 0) { + const { lonlat, address, name } = data[0]; + const lng = lonlat.split(",")[0]; + const lat = lonlat.split(",")[1]; + // this.setCenter(lat, lng); + // this.setMarker(lat, lng); + reslove({ + msg: "success", + data: { + lng, + lat, + address: address + name, + }, + }); + } else { + reslove({ + msg: "failed", + error: "未检索到相关位置坐标", + }); + } + }); + }; + + this.on = function (eventType, fn) { + if (eventType == "panend") { + this.map.on("dragend", fn); + } else { + this.map.on(eventType, fn); + } + }; -export default function init() { - this.mapType = typeof window.TMap!=='undefined' ? 'qq' : 'tiandi' - window.TMap = T; - console.log("天地图", T); - window.TMap = {}; - window.TMap.Map = function (ele, paramas) { - let tmap = new T.Map(ele, paramas); if (typeof ele == "string") { ele = document.getElementById("app"); } @@ -14,20 +230,7 @@ export default function init() { if (height == 0) { ele.style.height = width * 0.6 + "px"; } - Object.keys(tmap).forEach((ki) => { - this[ki] = tmap[ki]; - }); - return this; - }; - window.TMap.service = { - Search: T.LocalSearch, - Geocoder: T.Geocoder, - }; - window.TMap.MultiMarker = function () {}; - window.TMap.LatLng = function (lat, lng) { - return { - lat, - lng, - }; - }; + } + + return this; } diff --git a/src/views/modules/cpts/base/cpts/edit.vue b/src/views/modules/cpts/base/cpts/edit.vue index a80d53040..9f184ada4 100644 --- a/src/views/modules/cpts/base/cpts/edit.vue +++ b/src/views/modules/cpts/base/cpts/edit.vue @@ -331,12 +331,9 @@ import { requestPost } from "@/js/dai/request"; import nextTick from "dai-js/tools/nextTick"; import Schema from "async-validator"; import Tinymce from "@c/tinymce2/index.vue"; +import daiMap from "@/utils/dai-map"; var map; -var search; -var markers; -var infoWindowList; -var geocoder; // 新建一个正逆地址解析类 export default { components: { Tinymce }, @@ -626,29 +623,16 @@ export default { // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 initMap(item) { 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(map, { pageSize: 10 }); - // 新建一个地点搜索类 - markers = new TMap.MultiMarker({ - map: map, - geometries: [], - }); - infoWindowList = Array(10); - geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 + let map = new daiMap( + document.getElementById("app"), + { latitude, longitude }, + { + zoom: 16.2, // 设置地图缩放级别 + pitch: 43.5, // 设置俯仰角 + rotation: 45, // 设置地图旋转角度 + } + ); // 监听地图平移结束 map.on("panend", (e) => { @@ -657,70 +641,35 @@ export default { // this.handleMoveCenter(item); }, - setMarker(lat, lng) { - markers.setGeometries([]); - markers.add([ - { - id: "4", - styleId: "marker", - position: new TMap.LatLng(lat, lng), - properties: { - title: "marker4", - }, - }, - ]); - }, + async handleSearchMap(item) { + 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); - handleSearchMap(item) { - infoWindowList.forEach((infoWindow) => { - infoWindow.close(); - }); - infoWindowList.length = 0; - markers.setGeometries([]); - // 在地图显示范围内以给定的关键字搜索地点 - search - .searchNearby({ - keyword: this.fmData[item.keyName], - 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); - // item.supValues[0] = lng; - // item.supValues[1] = lat; - this.fmData[item.supKeys[0]] = lng; - this.fmData[item.supKeys[1]] = lat; - } else { - this.$message.error("未检索到相关位置坐标"); - } - }); + this.fmData[item.supKeys[0]] = lng; + this.fmData[item.supKeys[1]] = lat; + } else { + this.$message.error("未检索到相关位置坐标"); + } }, - handleMoveCenter(item, e) { + async handleMoveCenter(item, e) { console.log(e); //修改地图中心点 - const center = map.getCenter(); - const lat = center.getLat(); - const lng = center.getLng(); + 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; - this.setMarker(lat, lng); + map.setMarker(lat, lng); if (e && e.originalEvent) { - geocoder - .getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址 - .then((result) => { - this.fmData[item.keyName] = result.result.address; - }); + let { msg, data } = await map.getAddress(lat, lng); + if (msg == "success") { + this.fmData[item.keyName] = data.address; + } } },