5 changed files with 87 additions and 244 deletions
@ -1,187 +0,0 @@ |
|||
<template> |
|||
<el-row style="flex-wrap: nowrap"> |
|||
<el-input v-model="value" :placeholder="placeholder" /> |
|||
<el-button @click="visibleClick">选择</el-button> |
|||
</el-row> |
|||
<el-dialog v-model="state.visible" title="详细地址" width="800px"> |
|||
<div class="map-container"> |
|||
<el-input id="tipInput" v-model="state.tipInput" /> |
|||
<div id="container" style="width: 100%; height: 400px"></div> |
|||
<div id="panel"></div> |
|||
</div> |
|||
<template #footer> |
|||
<el-button @click="selectClick" type="primary">确定</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { reactive, watch, ref, onMounted, nextTick } from 'vue' |
|||
import { loadScript } from '@/utils/DesignForm' |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
modelValue?: string |
|||
disabled?: boolean |
|||
placeholder?: string |
|||
}>(), |
|||
{} |
|||
) |
|||
|
|||
const emits = defineEmits<{ |
|||
(e: 'update:modelValue', value: string): void |
|||
}>() |
|||
const value = ref(props.modelValue) |
|||
watch( |
|||
() => props.modelValue, |
|||
() => { |
|||
value.value = props.modelValue |
|||
} |
|||
) |
|||
const state = reactive({ |
|||
visible: false, |
|||
tipInput: '' |
|||
}) |
|||
const selectClick = () => { |
|||
state.visible = false |
|||
value.value = state.tipInput |
|||
emits('update:modelValue', value.value) |
|||
} |
|||
const visibleClick = () => { |
|||
state.visible = true |
|||
// 初始地址 |
|||
nextTick(() => { |
|||
const map = initMap() |
|||
mapSearch(map) |
|||
}) |
|||
} |
|||
const center = ref([113.264499, 23.130061]) |
|||
// 地图选择 |
|||
const initMap = () => { |
|||
const map = new AMap.Map('container', { |
|||
resizeEnable: true, |
|||
center: center.value, |
|||
zoom: 11, |
|||
viewMode: '3D' // 使用3D视图 |
|||
}) |
|||
//实时路况图层 |
|||
const marker = new AMap.Marker({ |
|||
position: map.getCenter(), |
|||
//icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', |
|||
// 设置是否可以拖拽 |
|||
draggable: true, |
|||
cursor: 'move' |
|||
// content: 'markerContent', |
|||
}) |
|||
const { lat, lng } = map.getCenter() |
|||
getDetailAddress(lng, lat, marker) |
|||
map.add(marker) //添加到地图 |
|||
map.on('click', (e: any) => { |
|||
const lnglat = e.lnglat |
|||
const lat = lnglat.lat |
|||
const lng = lnglat.lng |
|||
map.setCenter([lng, lat]) //设置地图中心点 |
|||
marker.setPosition([lng, lat]) //更新点标记位置 |
|||
getDetailAddress(lng, lat, marker) |
|||
}) |
|||
return map |
|||
} |
|||
const mapSearch = (map: any) => { |
|||
AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () { |
|||
const auto = new AMap.AutoComplete({ |
|||
input: 'tipInput' |
|||
}) |
|||
const placeSearch = new AMap.PlaceSearch({ |
|||
pageSize: 5, // 单页显示结果条数 |
|||
pageIndex: 1, // 页码 |
|||
city: '', // 兴趣点城市 |
|||
citylimit: false, //是否强制限制在设置的城市内搜索 |
|||
map: map, // 展现结果的地图实例 |
|||
panel: 'panel', // 结果列表将在此容器中进行展示。 |
|||
autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围 |
|||
}) |
|||
auto.on('select', (evt: any) => { |
|||
placeSearch.setCity(evt.poi.adcode) |
|||
placeSearch.search(evt.poi.name) //关键字查询查询 |
|||
/*placeSearch.search(evt.poi.name, function (status, result) { |
|||
//关键字查询查询 |
|||
// 查询成功时，result即对应匹配的POI信息 |
|||
console.log("搜索结果", result); |
|||
});*/ |
|||
state.tipInput = evt.poi.name // 更新输入框的值 |
|||
}) //注册监听，当选中某条记录时会触发 |
|||
/* |
|||
// 搜索结果地图上的icon层 |
|||
placeSearch.on('markerClick',()=>{ |
|||
console.log('placeSearch.onmarkerClick') |
|||
})*/ |
|||
// 搜索列表点击事件 |
|||
placeSearch.on('listElementClick', (evt: any) => { |
|||
state.tipInput = evt.data.name |
|||
}) |
|||
}) |
|||
} |
|||
const getDetailAddress = (lng: number, lat: number, marker: any) => { |
|||
// 根据经纬度获取详细地址 |
|||
AMap.plugin('AMap.Geocoder', () => { |
|||
const geocoder = new AMap.Geocoder() |
|||
geocoder.getAddress([lng, lat], (status: string, result: any) => { |
|||
if (status === 'complete' && result.info === 'OK') { |
|||
const detailAddress = result.regeocode.formattedAddress |
|||
state.tipInput = detailAddress |
|||
marker.setLabel({ |
|||
direction: 'center', |
|||
offset: new AMap.Pixel(0, -25), //设置文本标注偏移量 |
|||
content: `<div class='info'>${detailAddress}</div>` //设置文本标注内容 |
|||
}) |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
onMounted(() => { |
|||
console.log('onMountedonMounted') |
|||
loadScript( |
|||
'https://webapi.amap.com/maps?v=2.0&key=ljiKlTAsS7SNVqDM16IUwRVFFhrvbxiF&plugin=AMap.PlaceSearch' |
|||
).then(() => {}) |
|||
}) |
|||
</script> |
|||
<style lang="scss"> |
|||
.map-container { |
|||
position: relative; |
|||
} |
|||
.amap-sug-result { |
|||
z-index: 2500; |
|||
} |
|||
#panel { |
|||
z-index: 2500; |
|||
position: absolute; |
|||
background-color: white; |
|||
max-height: 90%; |
|||
overflow-y: auto; |
|||
top: 10px; |
|||
right: 10px; |
|||
width: 280px; |
|||
.amap_lib_placeSearch { |
|||
border: 1px solid #ebedf0; |
|||
border-radius: 2px; |
|||
padding: 5px 10px 2px; |
|||
.poibox { |
|||
border-bottom: 1px solid #e8e8e8; |
|||
cursor: pointer; |
|||
padding: 10px 5px; |
|||
position: relative; |
|||
min-height: 35px; |
|||
} |
|||
.amap_lib_placeSearch_pic { |
|||
width: 46px; |
|||
height: 46px; |
|||
float: left; |
|||
margin: 4px 10px 0 0; |
|||
img { |
|||
width: 46px; |
|||
height: 46px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue