148 lines
3.8 KiB
Vue
148 lines
3.8 KiB
Vue
<template>
|
||
<div id="container" ref="map"></div>
|
||
</template>
|
||
|
||
<script lang="ts" setup name="mapContainer">
|
||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||
import { shallowRef } from "@vue/reactivity";
|
||
|
||
const map = shallowRef(null);
|
||
let AMap: any = null;
|
||
let markerList: Array<any> = [];
|
||
let m_index: Number = 0;
|
||
let geocoder: any = null;
|
||
let autocomplete: any = null;
|
||
|
||
const emits = defineEmits("changeMaps");
|
||
|
||
const resetMap = () => {
|
||
markerList = [];
|
||
map.value.clearMap();
|
||
m_index = 0;
|
||
emits("changeMaps", markerList);
|
||
};
|
||
|
||
const initMap = async () => {
|
||
const loader = AMapLoader.load({
|
||
key: "4f8f55618010007147aab96fc72bb408",
|
||
version: "2.0",
|
||
});
|
||
|
||
AMap = await loader;
|
||
|
||
map.value = new AMap.Map("container", {
|
||
zoom: 13,
|
||
});
|
||
|
||
AMap.plugin("AMap.Geocoder", function () {
|
||
geocoder = new AMap.Geocoder({
|
||
radius: 10, // 逆地理编码范围，默认值：1000，单位：米
|
||
extensions: "all", // 返回地址描述结果时是否包含引擎内置的POI，默认值：base，可选值：base、all
|
||
}); // 经纬度数组
|
||
});
|
||
|
||
// // 创建 Autocomplete 实例
|
||
// autocomplete = new AMap.Autocomplete({
|
||
// city: "全国", // 设置默认城市为全国
|
||
// });
|
||
|
||
map.value.on("click", (e: any) => {
|
||
// console.log("点击", e.lnglat);
|
||
if (m_index >= 1) return;
|
||
// 调用函数并传入经纬度
|
||
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({
|
||
position: e.lnglat,
|
||
offset: new AMap.Pixel(-10, -10),
|
||
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];
|
||
});
|
||
emits("changeMaps", markerList);
|
||
// 在这里可以进行其他自定义逻辑操作
|
||
map.value.remove(marker);
|
||
m_index--;
|
||
marker = null;
|
||
});
|
||
});
|
||
};
|
||
|
||
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;
|
||
|
||
// // 更新搜索结果列表或下拉菜单等
|
||
// // ...
|
||
// }
|
||
// });
|
||
};
|
||
|
||
// 获取地区名称
|
||
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.push({
|
||
lnglat: e.lnglat,
|
||
address: result.regeocode.formattedAddress,
|
||
});
|
||
emits("changeMaps", markerList);
|
||
} else {
|
||
// 解析失败
|
||
console.log("逆地理编码失败");
|
||
}
|
||
});
|
||
};
|
||
|
||
defineExpose({
|
||
resetMap,
|
||
searchMap,
|
||
});
|
||
|
||
onMounted(() => {
|
||
initMap();
|
||
});
|
||
</script>
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
#container {
|
||
padding: 0px;
|
||
margin: 0px;
|
||
width: 400px;
|
||
height: 400px;
|
||
}
|
||
</style> |