Browse Source

地图差不多可以用了

feature
dai 3 years ago
parent
commit
55d82e715c
  1. 79
      src/utils/dai-map.js
  2. 20
      src/views/modules/cpts/base/cpts/edit.vue

79
src/utils/dai-map.js

@ -1,3 +1,5 @@
import nextTick from "dai-js/tools/nextTick";
// 封装了地图相关函数,兼容天地图、腾讯地图常用api // 封装了地图相关函数,兼容天地图、腾讯地图常用api
export default function init(ele, position, params) { export default function init(ele, position, params) {
const mapType = typeof window.TMap !== "undefined" ? "qq" : "td"; const mapType = typeof window.TMap !== "undefined" ? "qq" : "td";
@ -101,8 +103,8 @@ export default function init(ele, position, params) {
const { const {
location: { lat, lng, address }, location: { lat, lng, address },
} = data[0]; } = data[0];
// this.setCenter(lat, lng); this.setCenter(lat, lng);
// this.setMarker(lat, lng); this.setMarker(lat, lng);
reslove({ reslove({
msg: "success", msg: "success",
data: { data: {
@ -131,6 +133,15 @@ export default function init(ele, position, params) {
this.map.on(eventType, fn); this.map.on(eventType, fn);
}; };
} else { } else {
if (typeof ele == "string") {
ele = document.getElementById("app");
}
let width = ele.offsetWidth;
let height = ele.offsetHeight;
if (height == 0) {
ele.style.height = width * 0.5 + "px";
}
let center = new TDMap.LngLat(longitude, latitude); let center = new TDMap.LngLat(longitude, latitude);
this.map = new TDMap.Map(ele, { this.map = new TDMap.Map(ele, {
center, center,
@ -152,51 +163,54 @@ export default function init(ele, position, params) {
let lnglat = new TDMap.LngLat(lng, lat); let lnglat = new TDMap.LngLat(lng, lat);
if (!this.marker) { if (!this.marker) {
this.marker = new TDMap.Marker(lnglat, {}); this.marker = new TDMap.Marker(lnglat, {});
this.map.addOverLay(this.marker);
} else { } else {
this.marker.setLngLat(lnglat); this.marker.setLngLat(lnglat);
} }
}; };
this.geocoder = new TDMap.service.Geocoder(); // 新建一个正逆地址解析类 this.geocoder = new TDMap.Geocoder(); // 新建一个正逆地址解析类
this.getAddress = async function (lat, lng) { this.getAddress = async function (lat, lng) {
return new Promise((reslove) => { return new Promise((reslove) => {
this.geocoder.getLocation( this.geocoder.getLocation(new TDMap.LngLat(lng, lat), (result) => {
{ location: new TDMap.LatLng(lat, lng) }, if (result) {
(result) => { console.log("this.geocoder.getLocation", result);
if (result) { let status = result.getStatus();
let status = result.getStatus(); reslove({
reslove({ msg: "success",
msg: "success", data: {
data: { address: result.getAddress(),
address: result.getAddress(), },
}, });
}); } else {
} else { reslove({
reslove({ msg: "failed",
msg: "failed", error: "解析失败",
error: "解析失败", });
});
}
} }
); });
}); });
}; };
this.search = new TDMap.LocalSearch(this.map, { pageCapacity: 10 }); this.search = new TDMap.LocalSearch(this.map, { pageCapacity: 10 });
this.searchNearby = async function (keyword) { this.searchNearby = async function (keyword) {
return new Promise((reslove) => { return new Promise(async (reslove) => {
this.search.setQueryType(1); this.search.setQueryType(1);
this.search.searchNearby(keyword, this.map.getCenter(), 1000); this.search.searchNearby(keyword, this.map.getCenter(), 1000000000);
await nextTick(1000);
const result = this.search.getResults(); const result = this.search.getResults();
const data = result.getPois(); const data = result ? result.getPois() : null;
console.log("检索结果", data);
if (Array.isArray(data) && data.length > 0) { if (Array.isArray(data) && data.length > 0) {
const { lonlat, address, name } = data[0]; const { lonlat, address, name } = data[0];
const lng = lonlat.split(",")[0]; const lng = lonlat.split(" ")[0];
const lat = lonlat.split(",")[1]; const lat = lonlat.split(" ")[1];
// this.setCenter(lat, lng); this.setCenter(lat, lng);
// this.setMarker(lat, lng); this.setMarker(lat, lng);
reslove({ reslove({
msg: "success", msg: "success",
data: { data: {
@ -221,15 +235,6 @@ export default function init(ele, position, params) {
this.map.on(eventType, fn); this.map.on(eventType, fn);
} }
}; };
if (typeof ele == "string") {
ele = document.getElementById("app");
}
let width = ele.offsetWidth;
let height = ele.offsetHeight;
if (height == 0) {
ele.style.height = width * 0.6 + "px";
}
} }
return this; return this;

20
src/views/modules/cpts/base/cpts/edit.vue

@ -624,7 +624,7 @@ export default {
initMap(item) { initMap(item) {
let { latitude, longitude } = this.$store.state.user; let { latitude, longitude } = this.$store.state.user;
let map = new daiMap( map = new daiMap(
document.getElementById("app"), document.getElementById("app"),
{ latitude, longitude }, { latitude, longitude },
{ {
@ -635,7 +635,7 @@ export default {
); );
// //
map.on("panend", (e) => { map.on("moveend", (e) => {
this.handleMoveCenter(item, e); this.handleMoveCenter(item, e);
}); });
// this.handleMoveCenter(item); // this.handleMoveCenter(item);
@ -645,8 +645,8 @@ export default {
const { msg, data } = await map.searchNearby(this.fmData[item.keyName]); const { msg, data } = await map.searchNearby(this.fmData[item.keyName]);
if (msg == "success") { if (msg == "success") {
const { lat, lng } = data; const { lat, lng } = data;
map.setCenter(lat, lng); // map.setCenter(lat, lng);
map.setMarker(lat, lng); // map.setMarker(lat, lng);
this.fmData[item.supKeys[0]] = lng; this.fmData[item.supKeys[0]] = lng;
this.fmData[item.supKeys[1]] = lat; this.fmData[item.supKeys[1]] = lat;
@ -656,7 +656,7 @@ export default {
}, },
async handleMoveCenter(item, e) { async handleMoveCenter(item, e) {
console.log(e); console.log("handleMoveCenter", e);
// //
const { lat, lng } = map.getCenter(); const { lat, lng } = map.getCenter();
// item.supValues[0] = lng; // item.supValues[0] = lng;
@ -665,11 +665,9 @@ export default {
this.fmData[item.supKeys[1]] = lat; this.fmData[item.supKeys[1]] = lat;
map.setMarker(lat, lng); map.setMarker(lat, lng);
if (e && e.originalEvent) { let { msg, data } = await map.getAddress(lat, lng);
let { msg, data } = await map.getAddress(lat, lng); if (msg == "success") {
if (msg == "success") { this.fmData[item.keyName] = data.address;
this.fmData[item.keyName] = data.address;
}
} }
}, },
@ -701,7 +699,7 @@ export default {
await nextTick(600); await nextTick(600);
if (map) { if (map) {
if (data.latitude) { if (data.latitude) {
map.setCenter(new TMap.LatLng(data.latitude, data.longitude)); map.setCenter(data.latitude, data.longitude);
} else { } else {
if (this.formType == "edit" && this.$refs && this.$refs.mapSearch) { if (this.formType == "edit" && this.$refs && this.$refs.mapSearch) {
this.$refs.mapSearch[0].handleClick(); this.$refs.mapSearch[0].handleClick();

Loading…
Cancel
Save