更新地图选择
This commit is contained in:
weipengfei
parent
6f4cbcc24a
commit
9894b63c47
@ -11,15 +11,19 @@ let AMap: any = null;
|
||||
let markerList: Array<any> = [];
|
||||
let m_index: Number = 0;
|
||||
let geocoder: any = null;
|
||||
let autocomplete: any = null;
|
||||
let marker = null;
|
||||
|
||||
const emits = defineEmits("changeMaps");
|
||||
const emits = defineEmits(["changeMaps"]);
|
||||
|
||||
const resetMap = () => {
|
||||
markerList = [];
|
||||
map.value.clearMap();
|
||||
m_index = 0;
|
||||
emits("changeMaps", markerList);
|
||||
try {
|
||||
markerList = [];
|
||||
map.value?.clearMap();
|
||||
m_index = 0;
|
||||
emits("changeMaps", markerList);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
const initMap = async () => {
|
||||
@ -32,6 +36,7 @@ const initMap = async () => {
|
||||
|
||||
map.value = new AMap.Map("container", {
|
||||
zoom: 13,
|
||||
viewMode: "2D",
|
||||
});
|
||||
|
||||
AMap.plugin("AMap.Geocoder", function () {
|
||||
@ -41,49 +46,34 @@ const initMap = async () => {
|
||||
}); // 经纬度数组
|
||||
});
|
||||
|
||||
// // 创建 Autocomplete 实例
|
||||
// autocomplete = new AMap.Autocomplete({
|
||||
// city: "全国", // 设置默认城市为全国
|
||||
// });
|
||||
map.value.setFitView();
|
||||
|
||||
map.value.on("click", (e: any) => {
|
||||
// console.log("点击", e.lnglat);
|
||||
if (m_index >= 1) return;
|
||||
// if (m_index >= 1) return;
|
||||
if (m_index >= 1) {
|
||||
map.value?.remove(marker);
|
||||
m_index = 0;
|
||||
}
|
||||
// 调用函数并传入经纬度
|
||||
getDistrictName(e.lnglat.lng, e.lnglat.lat, e);
|
||||
|
||||
// 自定义 Marker 的图标
|
||||
var customIcon = new AMap.Icon({
|
||||
size: new AMap.Size(36, 36), // 图标尺寸
|
||||
image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", // 图标图片
|
||||
imageSize: new AMap.Size(26, 26), // 图标图片尺寸
|
||||
imageOffset: new AMap.Pixel(0, 0), // 图标图片偏移量
|
||||
label: {
|
||||
content: "起", // 文字内容
|
||||
offset: new AMap.Pixel(-100, -100), // 文字相对于图标的偏移量
|
||||
},
|
||||
});
|
||||
|
||||
// 创建标记并添加到地图
|
||||
let marker = new AMap.Marker({
|
||||
marker = new AMap.Marker({
|
||||
position: e.lnglat,
|
||||
offset: new AMap.Pixel(-10, -10),
|
||||
offset: new AMap.Pixel(0, 0),
|
||||
title: "位置",
|
||||
icon: customIcon,
|
||||
// content: "起",
|
||||
});
|
||||
map.value.add(marker);
|
||||
m_index++;
|
||||
|
||||
// 添加标记点击事件监听器
|
||||
marker.on("click", (event: any) => {
|
||||
console.log("删除", event);
|
||||
markerList = markerList.filter((item: any) => {
|
||||
item[0] == marker._position.pos[0] &&
|
||||
item[0] == marker._position.pos[0];
|
||||
});
|
||||
// markerList = markerList.filter((item: any) => {
|
||||
// item[0] == marker._position.pos[0] &&
|
||||
// item[0] == marker._position.pos[0];
|
||||
// });
|
||||
markerList = [];
|
||||
emits("changeMaps", markerList);
|
||||
// 在这里可以进行其他自定义逻辑操作
|
||||
map.value.remove(marker);
|
||||
m_index--;
|
||||
marker = null;
|
||||
@ -92,29 +82,34 @@ const initMap = async () => {
|
||||
};
|
||||
|
||||
const searchMap = (address: any) => {
|
||||
console.log(address);
|
||||
ElMessage.error("搜索功能开发中");
|
||||
|
||||
// autocomplete.search(address, function (status: any, result: any) {
|
||||
// console.log(status, result);
|
||||
|
||||
// if (status === "complete" && result.info === "OK") {
|
||||
// // 获取提示结果
|
||||
// var tips = result.tips;
|
||||
|
||||
// // 更新搜索结果列表或下拉菜单等
|
||||
// // ...
|
||||
// }
|
||||
// });
|
||||
// ElMessage.error("搜索功能开发中");
|
||||
AMap.plugin("AMap.PlaceSearch", async function () {
|
||||
try {
|
||||
const placeSearch = new AMap.PlaceSearch({
|
||||
pageSize: 5, // 单页显示结果条数
|
||||
pageIndex: 1, // 页码
|
||||
city: "510500", // 兴趣点城市
|
||||
citylimit: true, //是否强制限制在设置的城市内搜索
|
||||
map: map.value, // 展现结果的地图实例
|
||||
panel: false, // 结果列表将在此容器中进行展示。
|
||||
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
||||
});
|
||||
AMap.Event.addListener(placeSearch, "markerClick", (e: any) => {
|
||||
marker ? map.value?.remove(marker) : null;
|
||||
getDistrictName(e.event.lnglat.lng, e.event.lnglat.lat, e.event);
|
||||
});
|
||||
placeSearch.search(address);
|
||||
} catch (error) {
|
||||
ElMessage.error("没找到");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 获取地区名称
|
||||
const getDistrictName = (lng: any, lat: any, e: any) => {
|
||||
geocoder.getAddress([lng, lat], function (status: any, result: any) {
|
||||
if (status === "complete" && result.info === "OK") {
|
||||
// 解析成功，提取地区名称
|
||||
var district = result.regeocode.addressComponent.district;
|
||||
// console.log(district, result.regeocode); // 输出地区名字
|
||||
markerList = [];
|
||||
markerList.push({
|
||||
lnglat: e.lnglat,
|
||||
address: result.regeocode.formattedAddress,
|
||||
@ -122,7 +117,7 @@ const getDistrictName = (lng: any, lat: any, e: any) => {
|
||||
emits("changeMaps", markerList);
|
||||
} else {
|
||||
// 解析失败
|
||||
console.log("逆地理编码失败");
|
||||
ElMessage.error("逆地理编码失败");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -111,7 +111,7 @@
|
||||
@click="changeMap(0)"
|
||||
>
|
||||
<el-input
|
||||
placeholder="请点击上方地图选择地点"
|
||||
placeholder="请选择起点"
|
||||
readonly
|
||||
:value="formData.extend?.origin?.address"
|
||||
/>
|
||||
@ -122,7 +122,7 @@
|
||||
@click="changeMap(1)"
|
||||
>
|
||||
<el-input
|
||||
placeholder="请点击上方地图选择地点"
|
||||
placeholder="请选择中转点"
|
||||
readonly
|
||||
:value="formData.extend?.transfer?.address"
|
||||
/>
|
||||
@ -133,7 +133,7 @@
|
||||
@click="changeMap(2)"
|
||||
>
|
||||
<el-input
|
||||
placeholder="请点击上方地图选择地点"
|
||||
placeholder="请选择终点"
|
||||
readonly
|
||||
:value="formData.extend?.terminus?.address"
|
||||
/>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
clearable
|
||||
/>
|
||||
<el-button type="primary" @click="serach()">搜索</el-button>
|
||||
<!-- <el-button @click="resetMap()">重置</el-button> -->
|
||||
<el-button @click="resetMap()">重置</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="80px" label="地图">
|
||||
<MapContainer ref="mapRef" @changeMaps="changeMaps"></MapContainer>
|
||||
@ -124,14 +124,16 @@ const changeMaps = (e: any) => {
|
||||
// 提交按钮
|
||||
const handleSubmit = async () => {
|
||||
// if (address.value.length < 3) return ElMessage.error("请先选择三个地点");
|
||||
if (address.value.length < 1) return ElMessage.error("请先选择地点");
|
||||
popupRef.value?.close();
|
||||
emit("success", address.value);
|
||||
};
|
||||
|
||||
//打开弹窗
|
||||
const open = (type = "地点") => {
|
||||
const open = async (type = "地点") => {
|
||||
title.value = "选择" + type;
|
||||
popupRef.value?.open();
|
||||
await nextTick();
|
||||
resetMap();
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user