<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> -->
|
<input v-model="input" id="tipinput" /><button
|
@click="searchAddress"
|
style="background-color: #1890ff; color:white; border:none;margin-left:5px"
|
>
|
搜索
|
</button>
|
<div id="panel"></div>
|
<!-- <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"
|
id="amap"
|
>
|
<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";
|
import $ from 'jquery'
|
import func from 'vue-temp/vue-editor-bridge';
|
|
|
@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 self=this
|
// var auto = new AMap.Autocomplete(autoOptions);
|
// const placeSearch = new AMap.PlaceSearch(self.input);
|
// // console.log(window);
|
// auto.on("select", select);//注册监听，当选中某条记录时会触发
|
// function select(e) {
|
// placeSearch.setCity(e.poi.adcode);
|
// placeSearch.search(e.poi.name); //关键字查询查询
|
// self.clickPoint = [e.poi.location.lng, e.poi.location.lat]
|
// }
|
// }
|
private searchAddress() {
|
var map = new AMap.Map("amap", {
|
resizeEnable: true
|
});
|
var placeSearch = new AMap.PlaceSearch({
|
pageSize: 5, // 单页显示结果条数
|
pageIndex: 1, // 页码
|
city: "全国", // 兴趣点城市
|
citylimit: false, //是否强制限制在设置的城市内搜索
|
panel: "panel", // 结果列表将在此容器中进行展示。
|
map: map, // 展现结果的地图实例
|
autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
});
|
//关键字查询
|
placeSearch.search(this.input)
|
var salf=this
|
var markerone=0
|
map.on('click',click);
|
function click(e){
|
if(markerone===1){
|
map.remove(map.Marker)
|
}
|
salf.mapClick(e)
|
map.Marker=new AMap.Marker({
|
map: map,
|
position: salf.clickPoint,
|
animation:"AMAP_ANIMATION_BOUNCE"
|
})
|
markerone=1
|
}
|
// function click(e){
|
// console.log(e);
|
// salf.clickPoint=[e.lnglat.lng,e.lnglat.lat]
|
// }
|
// placeSearch.search(this.input,function(status, result){
|
// console.log(result);
|
// auto.on('click',click);
|
// function click(e){
|
// console.log(e);
|
// }
|
// });
|
// console.log(this.input);
|
}
|
// 初始定位到星虹国际
|
private clickPoint: any = this.lnglat === '' ? [
|
120.720262,
|
31.335757
|
] : [
|
this.lnglat.split(',')[1],
|
this.lnglat.split(',')[0]
|
]
|
|
private mapClick(e: any) {
|
// console.log(e);
|
const { lng, lat } = e.lnglat
|
this.clickPoint=[ lng, lat]
|
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;
|
}
|
#panel {
|
z-index: 999;
|
position: absolute;
|
background-color: white;
|
max-height: 100%;
|
overflow-y: auto;
|
left: 25px;
|
width: 280px;
|
top: 126px;
|
}
|
</style>
|
