下载插件
npm install @amap/amap-jsapi-loader
项目使用
- 初始化地图 initMap()
- 获取定位 getGeolocation()
- 创建点位 createMarker()
- 解析经纬度 geocode()
- 搜索poi searchFn()
<template>
<div class="map-container">
<div id="container"></div>
</div>
</template>
<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { ref, reactive, onMounted } from "vue";
import { shallowRef } from "@vue/reactivity";
import iconTeam from "@/assets/images/map/icon-dadian.png";
import {showToast, showLoadingToast, closeToast } from "vant";
const map = shallowRef(null); //非响应式
const searchWords = ref(""); //搜索
const Map = reactive({
myMap: {}, //把AMap中的方法保存在浏览器
lng: "",
lat: "",
marker: null,
placeSearch: null,
});
const selectIndex = ref(0);
const address = ref("");
const dataTips = ref([]);
const emits = defineEmits(["ok", "cancel"]);
window._AMapSecurityConfig = {
securityJsCode:'你的securityJsCode'
};
const initMap = () => {
AMapLoader.load({
key:'你的key'
version: "2.0", // 指定要加载的 JSAPI 的版本
plugins: [
"AMap.Autocomplete",
"AMap.PlaceSearch",
"AMap.Geocoder",
"AMap.Geolocation",
"AMap.LngLat",
],
}).then((AMap) => {
Map.myMap = AMap; //保存获取到的方法
//初始化地图房源地图
map.value = new AMap.Map(
"container", //绑定container
{
// enableHighAccuracy: true, //是否使用高精度定位，默认:true
// resizeEnable: true,
// center: [Map.lng, Map.lat],
viewMode: "2D", //是否为3D地图模式
zoom: 12, //初始化地图级别
// center: [116.397428, 39.90923], //初始化地图中心点位置
// zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
}
);
//调用获取定位方法
getGeolocation();
//点击获取经纬度;
map.value.on("click", (e) => {
// 获取经纬度
Map.lng = e.lnglat.lng;
Map.lat = e.lnglat.lat;
// 清除点
removeMarker();
// 标记点
createMarker();
selectIndex.value = 0;
geocode();
});
Map.placeSearch = new AMap.PlaceSearch({
map: map.value,
}); //构造地点查询类
// this.auto.on("select", this.select); //绑定查询事件
});
};
//地图定位
const getGeolocation = () => {
showLoadingToast({
message: "获取定位中...",
forbidClick: true,
});
let Geolocation = new Map.myMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
// position: "RB", //定位按钮的停靠位置
// offset: [10, 240], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
panToLocation: false,
});
// map.value.addControl(Geolocation);
Geolocation.getCurrentPosition((status, result) => {
if (status == "complete") {
onComplete(result);
closeToast();
} else {
showToast(result)
console.log(result)
onError(result);
}
});
};
//解析定位结果
const onComplete = (data) => {
Map.lng = data.position.lng;
Map.lat = data.position.lat;
createMarker();
geocode();
};
//解析定位错误信息
const onError = (data) => {
console.log(data, "onError");
};
const removeMarker = () => {
if (Map.marker) {
map.value.remove(Map.marker);
}
};
const createMarker = () => {
const icon = new Map.myMap.Icon({
size: new Map.myMap.Size(40, 40), // 图标尺寸
image: iconTeam,
imageSize: new Map.myMap.Size(40, 40), // 根据所设置的大小拉伸或压缩图片
});
Map.marker = new Map.myMap.Marker({
icon: icon,
position: [Map.lng, Map.lat],
offset: new Map.myMap.Pixel(-13, -30),
// draggable: true,
// // 设置拖拽效果
// raiseOnDrag: true,
});
map.value.add(Map.marker); //添加 点标记
map.value.setCenter([Map.lng, Map.lat]); //设置中心点
};
//解析经纬度
const geocode = () => {
const geocoder = new Map.myMap.Geocoder({
radius: 1000, //范围，默认：500
extensions: "all", //返回结果控制，默认：base
});
let lnglat = new Map.myMap.LngLat(Map.lng, Map.lat);
geocoder.getAddress(lnglat, (status, result) => {
if (status === "complete") {
// console.log(result.regeocode, "result");
address.value = result?.regeocode?.formattedAddress;
dataTips.value = result?.regeocode?.pois;
} else {
console.log("解析经纬度失败");
}
});
};
//解析经纬度
const getAddress = () => {
const geocoder = new Map.myMap.Geocoder({
radius: 1000, //范围，默认：500
extensions: "all", //返回结果控制，默认：base
});
let lnglat = new Map.myMap.LngLat(Map.lng, Map.lat);
geocoder.getAddress(lnglat, (status, result) => {
if (status === "complete") {
address.value = result?.regeocode?.formattedAddress;
} else {
console.log("解析经纬度失败");
}
});
};
// 根据地址列表中选择某一个地点
const select = (item, index) => {
if (!item) {
return;
}
selectIndex.value = index;
Map.lng = item.location.lng;
Map.lat = item.location.lat;
// 清除点
removeMarker();
// 标记点
createMarker();
//不需要重置列表
getAddress();
};
//搜索poi
const searchFn = () => {
if(searchWords.value==''){
showToast('请输入搜索位置关键词')
return
}
Map.placeSearch.search(searchWords.value, (status, result) => {
if (status === "complete") {
dataTips.value = result?.poiList?.pois;
Map.lng = result?.poiList?.pois[0].location.lng;
Map.lat = result?.poiList?.pois[0].location.lat;
map.value.clearMap(); //清除所有遮罩物
// 清除点
removeMarker();
// 标记点
createMarker();
//不需要重置列表
getAddress();
}
});
};
//获取位置返回
const goBack = (flag) => {
if (flag) {
emits("ok", {
lng: Map.lng,
lat: Map.lat,
address: address.value,
});
} else {
emits("cancel");
}
};
onMounted(() => {
initMap();
});
</script>
