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.
107 lines
3.5 KiB
107 lines
3.5 KiB
<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>
|
|
|