<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 input: any = ''
|
private mark: any = ''
|
|
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
|
}
|
}
|
// 初始定位到星虹国际
|
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>
|
