You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
3.5 KiB
108 lines
3.5 KiB
6 months ago
|
<template>
|
||
|
|
<div class="map">
|
||
|
|
<div id="container"></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { onMounted, reactive, ref, toRefs, watch,defineProps } from 'vue'
|
||
|
|
import AMapLoader from '@amap/amap-jsapi-loader'
|
||
|
|
// @ts-ignore
|
||
|
|
window._AMapSecurityConfig = {
|
||
|
|
securityJsCode: '0c4dce68b8380eb47ad26dbea2cff570',
|
||
|
|
}
|
||
|
|
const props = defineProps(['maoItem'])
|
||
|
|
const map = <any>ref(null)
|
||
|
|
const marker = <any>ref(null)
|
||
|
|
const timer = <any>ref(null)
|
||
|
|
const initMap = () => {
|
||
|
|
AMapLoader.load({
|
||
|
|
key: '37b09e9ef9458d8e987b9351420563ab', // 申请好的Web端开发者Key，首次调用 load 时必填
|
||
|
|
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||
|
|
plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||
|
|
})
|
||
|
|
.then((AMap) => {
|
||
|
|
map.value = new AMap.Map('container', {
|
||
|
|
//设置地图容器id
|
||
|
|
viewMode: '2D', //是否为3D地图模式
|
||
|
|
zoom: 20, //初始化地图级别
|
||
|
|
// center: [address.lon,address.lat], //初始化地图中心点位置
|
||
|
|
})
|
||
|
|
// const markerContent = `<div class="custom-content-marker">
|
||
|
|
// <img src="https://a.amap.com/jsapi/static/image/plugin/marker/end.png">
|
||
|
|
// <div class="close-btn" onclick="clearMarker()"></div>
|
||
|
|
// </div>`
|
||
|
|
// const loaction = props.maoItem.location.split(',')
|
||
|
|
// console.log(loaction,'loaction');
|
||
|
|
|
||
|
|
// const position = [loaction[0], loaction[1]] //Marker 经纬度
|
||
|
|
// marker.value = new AMap.Marker({
|
||
|
|
// position: position,
|
||
|
|
// content: markerContent, //将 html 传给 content
|
||
|
|
// offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
|
||
|
|
// // 设置是否可以拖拽
|
||
|
|
// draggable: true,
|
||
|
|
// cursor: 'move',
|
||
|
|
// // 设置拖拽效果
|
||
|
|
// raiseOnDrag: true,
|
||
|
|
// })
|
||
|
|
// map.add(marker)
|
||
|
|
// marker.on('dragging',draggingMap)
|
||
|
|
})
|
||
|
|
.catch((e) => {
|
||
|
|
console.log(e)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
onMounted(() => {
|
||
|
|
initMap()
|
||
|
|
})
|
||
|
|
initMap()
|
||
|
|
const draggingMap = () => {
|
||
|
|
// 判断是否已经设置了定时器
|
||
|
|
if (timer.value) {
|
||
|
|
clearTimeout(timer.value); // 清除之前的定时器
|
||
|
|
}
|
||
|
|
|
||
|
|
// 设置新的定时器
|
||
|
|
timer.value = setTimeout(() => {
|
||
|
|
console.log('最新坐标：', marker.getPosition());
|
||
|
|
var coordinate = marker.getPosition();
|
||
|
|
|
||
|
|
//反查地址-S
|
||
|
|
let geocoder;
|
||
|
|
AMap.plugin('AMap.Geocoder', function () {
|
||
|
|
geocoder = new AMap.Geocoder();
|
||
|
|
});
|
||
|
|
|
||
|
|
geocoder.getAddress([coordinate.lng, coordinate.lat], (status:any, result:any) => {
|
||
|
|
if (status === 'complete' && result.info === 'OK') {
|
||
|
|
console.log('地址获取成功：', result.regeocode.formattedAddress);
|
||
|
|
// console.log(result);
|
||
|
|
fetch(
|
||
|
|
`https://restapi.amap.com/v3/place/text?key=42dab0116529aa771fc2b1094174ce00&keywords=${form.locateAddress}`,
|
||
|
|
).then((res) => {
|
||
|
|
res.json().then((resoult) => {
|
||
|
|
|
||
|
|
// options = resoult.pois.map((item) => {
|
||
|
|
// return {value:item.address,label:item.address}
|
||
|
|
// });
|
||
|
|
console.log(resoult, '1111111111');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}, 500); // 设置执行间隔为0.5秒
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.map{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
#container{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|