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