<template>
|
<a-modal
|
title="坐标选择"
|
destroyOnClose
|
:visible="true"
|
@ok="addLonAndLat"
|
@cancel="handleMapCancel"
|
okText="确定"
|
class="modalStyle"
|
>
|
<div>
|
<div style="display: flex">
|
<div style="display: flex; width: 300px">
|
<div>地址：</div>
|
<a-input
|
placeholder="关键字搜索"
|
id="tipinput"
|
style="width: 160px; height: 26px"
|
></a-input>
|
<!-- <a-input
|
v-model="input"
|
placeholder="关键字搜索"
|
id="tipinput"
|
style="width: 160px; height: 26px"
|
@change="searchMap"
|
></a-input> -->
|
<!-- <a-button
|
size="small"
|
type="primary"
|
@click="searchMap"
|
style="margin-left: 10px"
|
>搜索</a-button
|
> -->
|
|
<!-- <el-amap-search-box
|
:search-option="searchOption"
|
:on-search-result="selectPoi"
|
style="width: 200px; height: 26px; margin-left: 10px;border;"
|
/> -->
|
<!-- <a-input style="width: 160px; height: 26px" @focus="selectPoi" /> -->
|
</div>
|
<div>
|
<span style="margin-left: 25px">经度：</span
|
><a-input
|
v-model="clickPoint[0]"
|
style="display: inline; width: 160px; height: 26px"
|
/>
|
</div>
|
<div>
|
<span style="margin-left: 25px">纬度：</span
|
><a-input
|
v-model="clickPoint[1]"
|
style="display: inline; width: 160px; height: 26px"
|
/>
|
</div>
|
</div>
|
<el-amap
|
ref="map"
|
:center="clickPoint"
|
:events="{ click: mapClick }"
|
:zoom="zoom"
|
:scroll-wheel-zoom="true"
|
style="height: 400px; width: 100%; margin-top: 20px"
|
>
|
<el-amap-marker
|
:position="clickPoint"
|
animation="AMAP_ANIMATION_BOUNCE"
|
:dragging="true"
|
></el-amap-marker>
|
</el-amap>
|
<!-- :scroll-wheel-zoom="true"-->
|
<!-- <baidu-map
|
:center="center"
|
:zoom="zoom"
|
@ready="handler"
|
@click="mapClick"
|
:scroll-wheel-zoom="true"
|
style="height: 400px; width: 100%"
|
>
|
<bm-control>
|
<bm-local-search
|
:keyword="keyword"
|
:auto-viewport="true"
|
style="display: none"
|
></bm-local-search>
|
<bm-marker
|
:position="{ lng: clickPoint.lng, lat: clickPoint.lat }"
|
:dragging="true"
|
animation="BMAP_ANIMATION_BOUNCE"
|
>
|
</bm-marker>
|
</bm-control>
|
</baidu-map> -->
|
</div>
|
</a-modal>
|
</template>
|
|
<script lang="tsx">
|
import {
|
Component,
|
Prop,
|
Vue,
|
Emit, Watch,
|
} from 'vue-property-decorator';
|
import any = jasmine.any;
|
import { get, post } from "@/util/request";
|
|
|
@Component({
|
})
|
export default class PickCoordinate extends Vue {
|
private center: any = [
|
120.726838,
|
31.3421
|
]
|
@Prop({
|
type: String,
|
default: ''
|
})
|
private lnglat!: string
|
|
@Prop({
|
type: String,
|
default: ''
|
})
|
private typeOperation!: string
|
|
private keyword: string = ''
|
private zoom = 19
|
private searchOption:any={
|
city: '全国',
|
citylimit: false
|
}
|
@Watch('clickPoint', {deep: true, immediate: true},)
|
private monitorMapFlag(newVal: any, oldVal: any) {
|
console.log(newVal,'newVal');
|
this.center= [newVal.lng,newVal.lat]
|
}
|
private num1:any=1
|
|
@Watch('lnglat', {deep: true, immediate: true})
|
private lnglatWatch(newVal: any, oldVal: any) {
|
console.log('------------');
|
console.log(newVal);
|
// this.center.lng = newVal.lng
|
// this.center.lat = newVal.lat
|
}
|
private created() {
|
console.log(this.clickPoint,'clickPoint');
|
}
|
|
// 初始化地图
|
// private handler({BMap, map}) {
|
// this.center.lng = this.typeOperation === 'add' ? '120.726838' : this.lnglat.split(',')[1]
|
// this.center.lat = this.typeOperation === 'add' ? '31.3421' : this.lnglat.split(',')[0]
|
// this.zoom = 19
|
|
// }
|
private selectPoi(e){
|
console.log(e);
|
let poi = e
|
if (poi.length > 0) {
|
this.clickPoint = [poi[0].lng, poi[0].lat]
|
}
|
}
|
private input:any=''
|
private mark:any=''
|
private searchMap(){
|
var autoOptions = {
|
input: "tipinput"
|
};
|
var auto = new AMap.AutoComplete(autoOptions);
|
const placeSearch = new AMap.PlaceSearch(this.input);
|
console.log(window);
|
auto.on("select", select);//注册监听，当选中某条记录时会触发
|
function select(e) {
|
console.log(e.poi.adcode);
|
placeSearch.setCity(e.poi.adcode);
|
placeSearch.search(e.poi.name); //关键字查询查询
|
}
|
|
// 关键字查询
|
// console.log(this.input);
|
// placeSearch.search(this.input, (status, result) => {
|
// // 查询成功时，result即对应匹配的POI信息
|
|
// console.log(result);//打印这句话报错，第一遍可以打印出来，第二遍就会报错
|
// });
|
// // 监听选中节点事件
|
// AMap.event.addListener(placeSearch, "selectChanged", (SelectChangeEvent) => {
|
// // 获取节点信息自行处理逻辑代码
|
// this.mark = SelectChangeEvent.selected.data;
|
// console.log(SelectChangeEvent.selected.data,'苏轼');
|
// });
|
|
}
|
// 初始定位到星虹国际
|
private clickPoint: any = this.lnglat === '' ? [
|
120.720262,
|
31.335757
|
] : [
|
this.lnglat.split(',')[1],
|
this.lnglat.split(',')[0]
|
]
|
|
private mapClick(e: any) {
|
const { lng, lat } = e.lnglat
|
this.clickPoint=[ lng, lat]
|
this.$forceUpdate()
|
// console.log(this.clickPoint);
|
}
|
|
private handleMapCancel() {
|
this.keyword = ''
|
this.flagSend(false)
|
}
|
|
private addLonAndLat() {
|
if (this.typeOperation === 'add') {
|
console.log('add');
|
this.sendLonLat(this.clickPoint)
|
} else {
|
console.log('upa');
|
this.editLonLat(this.clickPoint)
|
}
|
this.flagSend(false)
|
}
|
|
@Emit('mapFlag1')
|
private flagSend(flag: boolean) {
|
return flag;
|
}
|
|
@Emit('sendLonLat')
|
private sendLonLat(lonLat: any) {
|
console.log(lonLat,'jia');
|
return lonLat;
|
}
|
|
@Emit('editLonLat')
|
private editLonLat(lonLat: any) {
|
console.log(lonLat,'gai');
|
return lonLat;
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.modalStyle {
|
.ant-modal {
|
margin-left: 25%;
|
}
|
.ant-modal-content {
|
width: 800px;
|
}
|
}
|
.BMap_cpyCtrl,
|
.anchorBL {
|
display: none;
|
}
|
/* 去除高德地图的logo */
|
/deep/.amap-logo {
|
display: none;
|
opacity: 0 !important;
|
}
|
/deep/.amap-copyright {
|
opacity: 0;
|
}
|
.amap-sug-result {
|
position: absolute;
|
z-index: 9999 !important;;
|
background-color: #fefefe;
|
border: 1px solid #d1d1d1;
|
bottom: auto;
|
}
|
</style>
|
