<template>
|
<el-dialog v-model="dialogShow" width="70%" destroy-on-close>
|
<template #header>
|
<div> 坐标拾取</div>
|
</template>
|
<div class="fy-tip-red">左键点击地图选取坐标点，或者根据关键字搜索地点</div>
|
<el-row>
|
<el-col :span="10">
|
<el-form
|
:inline="true"
|
label-width="50px"
|
label-position="left"
|
:model="formObj"
|
ref="formRef"
|
destroy-on-close
|
>
|
<el-form-item label="地址" prop="address">
|
<el-input
|
v-model="formObj.address"
|
placeholder="请输入地址搜索"
|
></el-input>
|
</el-form-item>
|
<!-- <el-form-item label="经度" prop="lon">
|
<el-input
|
v-model="formObj.lon"
|
style="width: 100px"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="纬度" prop="lat">
|
<el-input
|
v-model="formObj.lat"
|
style="width: 100px"
|
></el-input>
|
</el-form-item> -->
|
<el-form-item>
|
<el-button type="primary" @click="searchKeyword"
|
>搜索</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</el-col>
|
<el-col :span="12">
|
<div v-if="searchResult.address">
|
<span>选择地址：</span>
|
<span>{{ searchResult.address }}</span>
|
<div>
|
<span>{{
|
searchResult.lon + ', ' + searchResult.lat
|
}}</span>
|
<el-divider direction="vertical" />
|
<span>{{
|
searchResult.gpsLon + ', ' + searchResult.gpsLat
|
}}</span>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="2">
|
<el-button
|
:disabled="searchResult.gpsLon == undefined"
|
type="success"
|
@click="submit"
|
>选择</el-button
|
>
|
</el-col>
|
</el-row>
|
<div id="mapContainer"></div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { shallowRef } from 'vue';
|
import AMapLoader from '@amap/amap-jsapi-loader';
|
// import { AMap, onMapMounted } from './baseMap';
|
import baseMapUtil from './baseMapUtil.js';
|
|
// var map;
|
var AMap;
|
var geocoder;
|
var inited = false;
|
// onMapMounted(() => {
|
// AMap.plugin('AMap.Geocoder', function () {
|
// geocoder = new AMap.Geocoder({
|
// city: '上海' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
// });
|
|
// // 使用geocoder做地理/逆地理编码
|
// });
|
// });
|
export default {
|
setup() {
|
const map = shallowRef(null);
|
return {
|
map
|
};
|
},
|
props: {
|
show: Boolean
|
},
|
data() {
|
return {
|
dialogShow: false,
|
formObj: {},
|
searchResult: {}
|
};
|
},
|
emits: ['update:show', 'onSubmit'],
|
watch: {
|
show(val) {
|
this.dialogShow = val;
|
},
|
dialogShow(val) {
|
if (val) {
|
this.mapInit();
|
} else {
|
this.formObj = {};
|
this.searchResult = {};
|
this.map.destroy();
|
}
|
this.$emit('update:show', val);
|
}
|
},
|
methods: {
|
mapInit() {
|
// if (!inited) {
|
AMapLoader.load({
|
key: 'c55f27799afbfa69dc5a3fad90cafe51', // 申请好的Web端开发者Key，首次调用 load 时必填
|
version: '2.0', // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
|
plugins: ['AMap.Geocoder'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
}).then((_AMap) => {
|
AMap = _AMap;
|
this.map = new AMap.Map('mapContainer', {
|
rotateEnable: true,
|
pitchEnable: true,
|
alwaysRender: false,
|
showLabel: true,
|
showBuildingBlock: true,
|
// mapStyle: 'amap://styles/e1e78509de64ddcd2efb4cb34c6fae2a',
|
// features: ['bg', 'road'],
|
pitch: 0, // 地图俯仰角度，有效范围 0 度- 83 度
|
viewMode: '2D', // 地图模式
|
resizeEnable: true,
|
center: [121.6039283, 31.25295567],
|
zooms: [3, 18],
|
zoom: 14
|
});
|
geocoder = new AMap.Geocoder({
|
city: '上海' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
});
|
this.map.on('click', (ev) => {
|
// this.formObj.lon = ev.lnglat.getLng();
|
// this.formObj.lat = ev.lnglat.getLat();
|
this.map.clearMap();
|
const marker = new AMap.Marker({
|
position: ev.lnglat
|
});
|
this.map.add(marker);
|
|
geocoder.getAddress(ev.lnglat, (status, result) => {
|
if (status === 'complete' && result.info === 'OK') {
|
this.searchResult.address =
|
result.regeocode.formattedAddress;
|
this.searchResult.lon = ev.lnglat.getLng();
|
this.searchResult.lat = ev.lnglat.getLat();
|
const [gpsLon, gpsLat] = baseMapUtil.gcj02towgs84(
|
this.searchResult.lon,
|
this.searchResult.lat
|
);
|
this.searchResult.gpsLon = gpsLon;
|
this.searchResult.gpsLat = gpsLat;
|
}
|
});
|
});
|
});
|
// inited = true;
|
// }
|
},
|
searchKeyword() {
|
const keyWord = this.formObj.address;
|
this.map.clearMap();
|
geocoder.getLocation(keyWord, (status, result) => {
|
if (status === 'complete' && result.info === 'OK') {
|
const geocode = result.geocodes[0];
|
this.searchResult.address = geocode.formattedAddress;
|
|
this.searchResult.lon = geocode.location.getLng();
|
this.searchResult.lat = geocode.location.getLat();
|
const [gpsLon, gpsLat] = baseMapUtil.gcj02towgs84(
|
this.searchResult.lon,
|
this.searchResult.lat
|
);
|
this.searchResult.gpsLon = gpsLon;
|
this.searchResult.gpsLat = gpsLat;
|
|
const marker = new AMap.Marker({
|
position: geocode.location
|
});
|
this.map.add(marker);
|
this.map.setFitView(marker);
|
}
|
});
|
},
|
submit() {
|
this.$emit('onSubmit', this.searchResult);
|
this.dialogShow = false;
|
}
|
}
|
// updated() {
|
// this.mapInit();
|
// }
|
};
|
</script>
|
<style>
|
#mapContainer {
|
position: relative;
|
width: 100%;
|
height: 60vh;
|
z-index: 0px;
|
border-radius: var(--el-border-radius-round);
|
box-shadow: var(--el-box-shadow);
|
}
|
</style>
|
