jiangyy
3 years ago
14 changed files with 1058 additions and 1129 deletions
@ -0,0 +1,259 @@ |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
|
|||
export const mapType = typeof window.TMap !== "undefined" ? "qq" : "td"; |
|||
|
|||
export const QQMap = window.TMap; |
|||
export const TDMap = window.T; |
|||
|
|||
export function searchNearby(map, keyword) { |
|||
if (mapType == "qq") { |
|||
return new Promise((reslove) => { |
|||
const search = new QQMap.service.Search(map, { pageSize: 10 }); |
|||
search |
|||
.searchNearby({ |
|||
keyword, |
|||
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]; |
|||
reslove({ |
|||
msg: "success", |
|||
data: { |
|||
lng, |
|||
lat, |
|||
address, |
|||
resultList: data, |
|||
}, |
|||
}); |
|||
} else { |
|||
reslove({ |
|||
msg: "failed", |
|||
error: "未检索到相关位置坐标", |
|||
}); |
|||
} |
|||
}) |
|||
.catch((error) => { |
|||
reslove({ |
|||
msg: "failed", |
|||
error, |
|||
}); |
|||
}); |
|||
}); |
|||
} else { |
|||
return new Promise(async (reslove) => { |
|||
const search = new TDMap.LocalSearch(map, { pageCapacity: 10 }); |
|||
search.setQueryType(1); |
|||
search.searchNearby(keyword, map.getCenter(), 1000000000); |
|||
|
|||
await nextTick(1000); |
|||
|
|||
const result = search.getResults(); |
|||
const data = result ? result.getPois() : null; |
|||
|
|||
console.log("检索结果", data); |
|||
|
|||
if (Array.isArray(data) && data.length > 0) { |
|||
const { lonlat, address, name } = data[0]; |
|||
const lng = lonlat.split(" ")[0]; |
|||
const lat = lonlat.split(" ")[1]; |
|||
reslove({ |
|||
msg: "success", |
|||
data: { |
|||
lng, |
|||
lat, |
|||
address: address + name, |
|||
resultList: data, |
|||
}, |
|||
}); |
|||
} else { |
|||
reslove({ |
|||
msg: "failed", |
|||
error: "未检索到相关位置坐标", |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
|
|||
// 封装了地图相关函数，兼容天地图、腾讯地图常用api
|
|||
export default function init(ele, position, params) { |
|||
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, title) {}; |
|||
this.getAddress = async function (lat, lng) {}; |
|||
this.on = function (eventType, fn) {}; |
|||
|
|||
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: this.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, title = "位置") { |
|||
this.markers.setGeometries([]); |
|||
this.markers.add([ |
|||
{ |
|||
id: "4", |
|||
styleId: "marker", |
|||
position: new QQMap.LatLng(lat, lng), |
|||
properties: { |
|||
title, |
|||
}, |
|||
}, |
|||
]); |
|||
}; |
|||
|
|||
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.on = function (eventType, fn) { |
|||
if (eventType == "dragend") { |
|||
this.map.on("moveend", (e) => { |
|||
console.log("dragend", e); |
|||
if (e && e.originalEvent) { |
|||
fn(e); |
|||
} |
|||
}); |
|||
} else { |
|||
this.map.on(eventType, fn); |
|||
} |
|||
}; |
|||
} 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); |
|||
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, title = "位置") { |
|||
let lnglat = new TDMap.LngLat(lng, lat); |
|||
if (!this.marker) { |
|||
this.marker = new TDMap.Marker(lnglat, { |
|||
title, |
|||
}); |
|||
this.map.addOverLay(this.marker); |
|||
} else { |
|||
this.marker.setLngLat(lnglat); |
|||
} |
|||
}; |
|||
|
|||
this.geocoder = new TDMap.Geocoder(); // 新建一个正逆地址解析类
|
|||
this.getAddress = async function (lat, lng) { |
|||
return new Promise((reslove) => { |
|||
this.geocoder.getLocation(new TDMap.LngLat(lng, lat), (result) => { |
|||
if (result) { |
|||
console.log("this.geocoder.getLocation", result); |
|||
let status = result.getStatus(); |
|||
reslove({ |
|||
msg: "success", |
|||
data: { |
|||
address: result.getAddress(), |
|||
}, |
|||
}); |
|||
} else { |
|||
reslove({ |
|||
msg: "failed", |
|||
error: "解析失败", |
|||
}); |
|||
} |
|||
}); |
|||
}); |
|||
}; |
|||
|
|||
this.on = function (eventType, fn) { |
|||
if (eventType == "dragend") { |
|||
this.map.on("dragend", (e) => { |
|||
console.log("dragend", e); |
|||
fn(e); |
|||
}); |
|||
} else { |
|||
this.map.on(eventType, fn); |
|||
} |
|||
}; |
|||
} |
|||
|
|||
this.searchNearby = async function (keyword) { |
|||
const ret = await searchNearby(this.map, keyword); |
|||
|
|||
return ret; |
|||
}; |
|||
|
|||
return this; |
|||
} |
|||
Loading…
Reference in new issue