267 lines
8.4 KiB
Vue
267 lines
8.4 KiB
Vue
<template>
|
||
<div>
|
||
<!-- <label for="tipinput">地址：</label>-->
|
||
<!-- <div id="tipinput" class="input" placeholder="输入地址关键字" v-model="keyword"/>-->
|
||
<div id="container" style="width: 100%; border-radius: 8px" :style="`height:${height || '200'}px;`"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: ['setLocation', 'height'],
|
||
data() {
|
||
return {
|
||
keyword: '',
|
||
showCode: false,
|
||
address: {},
|
||
getLng: '', // 点击的纬度
|
||
getLat: '', // 点击的经度
|
||
lnglat: []
|
||
}
|
||
},
|
||
watch: {},
|
||
methods: {
|
||
init() {
|
||
const vm = this
|
||
let marker
|
||
const map = new AMap.Map('container', {
|
||
// 初始化地图
|
||
center: vm.setLocation.length > 0 && vm.setLocation[0] !== null ? vm.setLocation : [114.05956, 22.54286],
|
||
resizeEnable: true,
|
||
zoom: 16,
|
||
keyboardEnable: false,
|
||
// resizeEnable: true,
|
||
viewMode: '3D',
|
||
pinch: 45
|
||
})
|
||
map.setFitView()
|
||
let geocoder
|
||
// const auto = new AMap.Autocomplete({ input: 'tipinput' }) // 绑定搜索input
|
||
const infoWindow = new AMap.InfoWindow({
|
||
// 构造标注点的文本参数
|
||
autoMove: true,
|
||
offset: new AMap.Pixel(10, 20) // 标记的偏移量
|
||
})
|
||
// const placeSearch = new AMap.PlaceSearch({ // 构造地点查询类
|
||
// map: map,
|
||
// pageSize: 1, // 单页显示结果条数
|
||
// extensions: 'all' // 返回基本地址信息
|
||
// })
|
||
function regeoCode(getLng, getLat) {
|
||
if (!geocoder) {
|
||
geocoder = new AMap.Geocoder({
|
||
// city: '010', //城市设为北京，默认：“全国”
|
||
radius: 1000 // 范围，默认：500
|
||
})
|
||
}
|
||
vm.lnglat = [getLng, getLat]
|
||
if (!marker) {
|
||
marker = new AMap.Marker({
|
||
icon: 'http:////a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
|
||
position: [getLng, getLat],
|
||
offset: new AMap.Pixel(-13, -30),
|
||
draggable: true,
|
||
cursor: 'move',
|
||
raiseOnDrag: true
|
||
})
|
||
map.add(marker)
|
||
}
|
||
marker.setPosition(vm.lnglat)
|
||
map.setCenter(marker.getPosition())
|
||
AMap.event.addListener(marker, 'dragend', function (e) {
|
||
vm.lnglat = marker.getPosition()
|
||
geocoder.getAddress(vm.lnglat, function (status, result) {
|
||
if (status === 'complete' && result.regeocode) {
|
||
console.log(result.regeocode.addressComponent)
|
||
const address = result.regeocode.formattedAddress
|
||
const citycode = result.regeocode.addressComponent.citycode
|
||
const value = {
|
||
address: address,
|
||
province: result.regeocode.addressComponent.province,
|
||
city: result.regeocode.addressComponent.city,
|
||
dist: result.regeocode.addressComponent.district
|
||
}
|
||
vm.keyword = address
|
||
vm.address = value
|
||
infoWindow.setContent(createContent(address, vm.lnglat, citycode))
|
||
infoWindow.open(map, marker.getPosition())
|
||
vm.$emit('getLocation', value, vm.lnglat)
|
||
} else {
|
||
console.log('111')
|
||
vm.$Notice.error({
|
||
title: '温馨提示：',
|
||
desc: `位置有误！`
|
||
})
|
||
}
|
||
})
|
||
})
|
||
geocoder.getAddress(vm.lnglat, function (status, result) {
|
||
if (status === 'complete' && result.regeocode) {
|
||
console.log(result.regeocode.addressComponent)
|
||
const address = result.regeocode.formattedAddress
|
||
const citycode = result.regeocode.addressComponent.citycode
|
||
const value = {
|
||
address: address,
|
||
province: result.regeocode.addressComponent.province,
|
||
city: result.regeocode.addressComponent.city,
|
||
dist: result.regeocode.addressComponent.district
|
||
}
|
||
vm.keyword = address
|
||
vm.address = value
|
||
infoWindow.setContent(createContent(address, vm.lnglat, citycode))
|
||
infoWindow.open(map, marker.getPosition())
|
||
vm.$emit('getLocation', value, vm.lnglat)
|
||
} else {
|
||
vm.$Notice.error({
|
||
title: '温馨提示：',
|
||
desc: `位置有误！`
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
function createContent(address, lnglat, citycode) {
|
||
// 信息窗体内容
|
||
const s = []
|
||
// s.push(`<b>经纬度：${lnglat}</b>`)
|
||
s.push(`地址：${address}`)
|
||
// s.push(`区号：${citycode}`)
|
||
return s.join('<br>')
|
||
}
|
||
|
||
// function select(e) { // 搜索函数
|
||
// console.log(e, '7987')
|
||
// placeSearch.setCity(e.poi.adcode)
|
||
// placeSearch.search(e.poi.name, (status, result) => { // 关键字查询查询
|
||
// console.log(status)
|
||
// const { lng, lat } = result.poiList.pois[0].location
|
||
// regeoCode(lng, lat)
|
||
// })
|
||
// }
|
||
// AMap.event.addListener(auto, 'select', select) // 注册监听，当选中某条记录时会触发
|
||
// AMap.event.addListener(placeSearch, 'markerClick', (e) => { // 点击标注
|
||
// })
|
||
map.on('click', e => {
|
||
// 点击地图添加标注点
|
||
regeoCode(e.lnglat.getLng(), e.lnglat.getLat())
|
||
console.log('111')
|
||
})
|
||
map.on('dragend', () => {
|
||
// 移动地图
|
||
regeoCode(map.getCenter().lng, map.getCenter().lat)
|
||
})
|
||
map.on('complete', () => {
|
||
// 地图加载完成
|
||
regeoCode(map.getCenter().lng, map.getCenter().lat) // 初始化地图中心点坐标
|
||
})
|
||
AMap.plugin(
|
||
[
|
||
// 添加 3D 罗盘控制
|
||
'AMap.ControlBar'
|
||
],
|
||
() => {
|
||
map.addControl(new AMap.ControlBar())
|
||
}
|
||
)
|
||
}
|
||
},
|
||
mounted() {
|
||
setTimeout(() => {
|
||
this.init()
|
||
}, 800)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
#iCenter {
|
||
height: 500px;
|
||
position: relative;
|
||
display: flex;
|
||
flex: 1;
|
||
}
|
||
#result {
|
||
width: 210px;
|
||
position: relative;
|
||
height: 500px;
|
||
overflow-y: scroll;
|
||
border-right: 1px solid #ccc;
|
||
}
|
||
.amap_lib_placeSearch {
|
||
height: 100%;
|
||
overflow-y: scroll;
|
||
}
|
||
.amap_lib_placeSearch_page {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
}
|
||
#me {
|
||
border-top: 1px solid #ccc;
|
||
margin-top: 6px;
|
||
padding-top: 6px;
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
.amap_lib_placeSearch .poibox {
|
||
border-bottom: 1px solid #eaeaea;
|
||
cursor: pointer;
|
||
padding: 5px 0 5px 10px;
|
||
position: relative;
|
||
min-height: 35px;
|
||
}
|
||
.amap_lib_placeSearch_poi {
|
||
background: url(https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png) no-repeat;
|
||
height: 31px;
|
||
width: 19px;
|
||
cursor: pointer;
|
||
left: -1px;
|
||
text-align: center;
|
||
color: #fff;
|
||
font: 12px arial, simsun, sans-serif;
|
||
padding-top: 3px;
|
||
}
|
||
.amap_lib_placeSearch .poibox .poi-title {
|
||
margin-left: 25px;
|
||
font-size: 13px;
|
||
overflow: hidden;
|
||
}
|
||
.amap_lib_placeSearch .amap_lib_placeSearch_poi {
|
||
position: absolute;
|
||
}
|
||
.amap_lib_placeSearch .poibox .poi-info {
|
||
word-break: break-all;
|
||
margin: 0 0 0 25px;
|
||
overflow: hidden;
|
||
}
|
||
.amap_lib_placeSearch .poibox .poi-info p {
|
||
color: #999;
|
||
font-family: Tahoma;
|
||
line-height: 20px;
|
||
font-size: 12px;
|
||
}
|
||
.amap_lib_placeSearch .poibox .poibox-icon {
|
||
margin-left: 7px;
|
||
margin-top: 4px;
|
||
}
|
||
.amap-pl-pc .poi-img {
|
||
float: right;
|
||
margin: 3px 8px 0;
|
||
width: 90px;
|
||
height: 56px;
|
||
overflow: hidden;
|
||
}
|
||
.poibox {
|
||
cursor: pointer;
|
||
}
|
||
.poibox:hover {
|
||
background: #f6f6f6;
|
||
}
|
||
.selected {
|
||
background-image: url(https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png) !important;
|
||
}
|
||
.amap-info-content {
|
||
width: 200px !important;
|
||
}
|
||
</style>
|