|
@@ -9,7 +9,7 @@
|
|
|
clearable
|
|
|
placeholder="输入城市+关键字搜索"
|
|
|
@select="handleSelect"
|
|
|
- style="width: 300px"
|
|
|
+ style="width: 400px"
|
|
|
/>
|
|
|
<el-input v-model="location.longitude" placeholder="点击地图选择经度" maxlength="15" readonly style="width: 150px; margin: 0 5px"></el-input>
|
|
|
<el-input v-model="location.latitude" placeholder="点击地图选择纬度" maxlength="15" readonly style="width: 150px"></el-input>
|
|
@@ -19,7 +19,7 @@
|
|
|
|
|
|
<script setup>
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
-import {computed, onMounted, ref, shallowRef, watch} from 'vue';
|
|
|
+import { onMounted, ref, shallowRef, watch } from 'vue';
|
|
|
window._AMapSecurityConfig = {
|
|
|
securityJsCode: import.meta.env.VITE_AMAP_SECURITYJSCODE,
|
|
|
};
|
|
@@ -59,6 +59,7 @@ const initMap = () => {
|
|
|
map.value = new AMap.Map('map-container');
|
|
|
// 添加点击事件
|
|
|
map.value.on('click', onMapClick);
|
|
|
+
|
|
|
if (location.value.longitude) {
|
|
|
drawMarker();
|
|
|
}
|
|
@@ -117,38 +118,37 @@ const onMapClick = (e) => {
|
|
|
geocoder.getAddress([lng, lat], (status, result) => {
|
|
|
if (status === 'complete' && result.info === 'OK') {
|
|
|
const { addressComponent, formattedAddress } = result.regeocode;
|
|
|
- let { city, province, district,township,adcode } = addressComponent;
|
|
|
- if (!city) {
|
|
|
- // 直辖市
|
|
|
- city = province;
|
|
|
- }
|
|
|
- const allAddress = province+city+district+township;
|
|
|
- const street = formattedAddress.substring(allAddress.length);
|
|
|
+ let { city, province, district, township, adcode } = addressComponent;
|
|
|
+ if (!city) {
|
|
|
+ // 直辖市
|
|
|
+ city = province;
|
|
|
+ }
|
|
|
location.value = {
|
|
|
longitude: lng,
|
|
|
latitude: lat,
|
|
|
- formattedAddress,
|
|
|
- street,
|
|
|
- zone: [province, city, district,township],
|
|
|
- adcode
|
|
|
+ formattedAddress,
|
|
|
+ zone: [province, city, district, township],
|
|
|
+ adcode,
|
|
|
};
|
|
|
- emit('update:modelValue', location.value);
|
|
|
+ keyword.value = formattedAddress;
|
|
|
+ emit('update:modelValue', location.value);
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
// 点击搜索项
|
|
|
const handleSelect = (item) => {
|
|
|
- const { pname, cityname, adname, address, name } = item;
|
|
|
+ console.log(item);
|
|
|
+ const { pname, cityname, adname, address, name, adcode } = item;
|
|
|
const { lng, lat } = item.location;
|
|
|
location.value = {
|
|
|
longitude: lng,
|
|
|
latitude: lat,
|
|
|
- address,
|
|
|
- zone: [pname, cityname, adname],
|
|
|
+ adcode,
|
|
|
+ formattedAddress: address,
|
|
|
+ zone: [pname, cityname, adname, ''],
|
|
|
name,
|
|
|
};
|
|
|
-
|
|
|
- emit('update:modelValue', location.value);
|
|
|
+ emit('update:modelValue', location.value);
|
|
|
map.value.setZoomAndCenter(16, [lng, lat]);
|
|
|
};
|
|
|
// 绘制地点marker
|
|
@@ -162,10 +162,10 @@ const drawMarker = (val) => {
|
|
|
anchor: 'bottom-center',
|
|
|
});
|
|
|
map.value.add(marker);
|
|
|
- // map.value.setZoomAndCenter(16, [longitude, latitude]);
|
|
|
+ map.value.setZoomAndCenter(16, [longitude, latitude]);
|
|
|
};
|
|
|
defineExpose({
|
|
|
- location,
|
|
|
+ location,
|
|
|
});
|
|
|
</script>
|
|
|
|