This commit is contained in:
zmj 2024-06-07 08:40:22 +08:00
parent b2b8b13503
commit c5a70e321e
3 changed files with 94 additions and 153 deletions

View File

@ -63,4 +63,4 @@
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=SMJBZ-WCHK4-ZPZUA-DSIXI-XDDVQ-XWFX7"></script> <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=SMJBZ-WCHK4-ZPZUA-DSIXI-XDDVQ-XWFX7&libraries=service"></script>

View File

@ -1,6 +1,7 @@
<template> <template>
<el-card> <el-card>
<div class="w-[600px]"> {{ formData }}
<div class="w-[900px]">
<el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules"> <el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
<el-tabs v-model="activeName" class="demo-tabs"> <el-tabs v-model="activeName" class="demo-tabs">
<el-tab-pane label="基础设置" name="first"> <el-tab-pane label="基础设置" name="first">
@ -14,8 +15,8 @@
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0"></el-switch> <el-switch v-model="formData.status" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item> </el-form-item>
<el-form-item label="营业时间" prop="title"> <el-form-item label="营业时间" prop="title">
<el-time-picker v-model="formData.times" is-range range-separator="-" start-placeholder="开始时间" <el-time-picker v-model="formData.times" is-range range-separator="-"
end-placeholder="结束时间" value-format="HH:mm:ss" /> start-placeholder="开始时间" end-placeholder="结束时间" value-format="HH:mm:ss" />
</el-form-item> </el-form-item>
<el-form-item label="门店地址" prop="title"> <el-form-item label="门店地址" prop="title">
<el-row> <el-row>
@ -44,7 +45,7 @@
<el-form-item label="配送范围(km)" prop="title"> <el-form-item label="配送范围(km)" prop="title">
<el-input-number v-model="formData.range" :step="1" /> <el-input-number v-model="formData.range" :step="1" />
</el-form-item> </el-form-item>
<el-form-item label="门店详细地址" prop="title"> <el-form-item label="门店详细地址" prop="title" class="w-[900px] h-[600px]">
<myMap :formData="formData"></myMap> <myMap :formData="formData"></myMap>
</el-form-item> </el-form-item>
</el-tab-pane> </el-tab-pane>
@ -94,6 +95,7 @@ const formData = reactive({
store_name: '', store_name: '',
status: 0, status: 0,
times: '', times: '',
phone: "",
province_id: "", province_id: "",
city_id: '', city_id: '',
area_id: '', area_id: '',
@ -147,7 +149,8 @@ const setFormData = async (data: Record<any, any>) => {
onMounted(() => { onMounted(() => {
apiGetStore().then(res => { apiGetStore().then(res => {
setFormData(res) setFormData(res)
console.log(formData) // console.log('res', res)
// console.log('formData', formData)
}) })

View File

@ -1,172 +1,110 @@
<template> <template>
<div> <el-autocomplete class="w-[500px]" v-model="locationInfo.title" @select="handleSelect"
{{ dataMap.latitude }}-{{ dataMap.lngitude }} :fetch-suggestions="querySearch" placeholder="请输入详细地址" :trigger-on-focus="false" />
<!-- {{ formData }} --> <el-button type="primary" @click="getLocationByAddress">搜索</el-button>
<div class="mb-6"> <el-button type="primary" @click="getLocation">当前位置</el-button>
<el-autocomplete v-model="address" :fetch-suggestions="querySearch" placeholder="请输入详细地址" <div id="myMap" class="w-[100%] h-[100%]"></div>
:trigger-on-focus="false" />
<el-button type="primary" @click="getLocations">
搜索
</el-button>
<el-button type="primary" @click="getLocation">
当前位置
</el-button>
</div>
<div id="amp-container" class="w-[100%]" />
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, reactive, ref, defineProps } from 'vue'; import { ref, onMounted } from "vue"
import { jsonp } from "vue-jsonp" import { jsonp } from "vue-jsonp"
import feedback from '@/utils/feedback'
let myMap: any = null //
var markerLayer: any = null //
var geocoder: any = null; //
const props = defineProps({ let locationInfo = ref({
formData: { address: "",
type: Object, title: "",
} lat: "",
}) lng: ""
const dataMap = ref({
map: '',
markerLayer: '',
latitude: props.formData.lat, //
lngitude: props.formData.lng, //
});
watch(
dataMap.value,
(val: boolean) => {
props.formData.lat = val.latitude;
props.formData.lng = val.lngitude;
},
)
const TMap = (window as any).TMap;
onMounted(() => {
init();
// getLocation();
});
const init = () => {
let center = new TMap.LatLng(dataMap.value.latitude, dataMap.value.lngitude);
dataMap.value.map = new TMap.Map(document.getElementById('amp-container'), {
center: center,//
// zoom: 11, //
viewMode: '2D'
});
(dataMap.value.map as any).on('click', clickHandler); //
markerLayer(); //
};
//
const reloadMap = () => {
(document.getElementById('amp-container') as any).innerHTML = '';
dataMap.value.markerLayer = '';
let center = new TMap.LatLng(dataMap.value.latitude, dataMap.value.lngitude);
dataMap.value.map = new TMap.Map(document.getElementById('amp-container'), {
center: center,//
viewMode: '2D'
});
markerLayer();
};
const getLocation = async () => {
try {
jsonp('https://apis.map.qq.com/ws/location/v1/ip?key=SMJBZ-WCHK4-ZPZUA-DSIXI-XDDVQ-XWFX7&output=jsonp').then(res => {
if (res.result) {
dataMap.value.latitude = res.result.location.lat;
dataMap.value.lngitude = res.result.location.lng;
// dataMap.latitude = 30.629673;
// dataMap.lngitude = 103.775231;
(dataMap.value.map as any).setCenter(new TMap.LatLng(dataMap.value.latitude, dataMap.value.lngitude));
reloadMap();
}
}) })
} catch (e) { const initMap = () => {
console.log(e); var center = new window.TMap.LatLng(30.629673, 103.775231)
} myMap = new window.TMap.Map(document.getElementById('myMap'), {
}; center: center,
zoom: 15,
});
myMap.on('click', clickHandler);
markerLayer = new window.TMap.MultiMarker({
id: 'marker-layer',
map: myMap
});
geocoder = new window.TMap.service.Geocoder()
const setMarkerBylatLon = (lat, lng) => {
dataMap.value.latitude = lat;
dataMap.value.lngitude = lng;
(dataMap.value.map as any).setCenter(new TMap.LatLng(dataMap.value.latitude, dataMap.value.lngitude));
reloadMap();
} }
// //
const clickHandler = (evt: any) => { const clickHandler = (evt: any) => {
let lavting = evt.latLng setMarker(evt.latLng.getLat(), evt.latLng.getLng())
console.log(lavting.getLat(), lavting.getLng())
setMarkerBylatLon(evt.latLng.lat.toFixed(4), evt.latLng.lng.toFixed(4))
return
dataMap.latitude = evt.latLng.getLat().toFixed(6);
dataMap.lngitude = evt.latLng.getLng().toFixed(6);
// (dataMap.map as any).setCenter(new TMap.LatLng(dataMap.latitude, dataMap.lngitude));
reloadMap();
};
//
const markerLayer = () => {
dataMap.value.markerLayer = new TMap.MultiMarker({
map: dataMap.value.map, //
//
styles: {
//styleId"myStyle"stylesstyleId
"myStyle": new TMap.MarkerStyle({
"width": 25, //
"height": 35, //
// "src": '../../assets/logo.png', //
'background': 'pink',
//
"anchor": { x: 16, y: 32 }
})
},
//
geometries: [
{
"id": "1", //id
"styleId": 'myStyle', //id
"position": new TMap.LatLng(dataMap.value.latitude, dataMap.value.lngitude), //
},
]
});
};
const address = ref('');
//
const getLocations = async () => {
try {
let { result } = await jsonp(`https://apis.map.qq.com/ws/geocoder/v1/?key=SMJBZ-WCHK4-ZPZUA-DSIXI-XDDVQ-XWFX7&address=${address.value}&output=jsonp`);
dataMap.value.latitude = result.location.lat;
dataMap.value.lngitude = result.location.lng;
(dataMap.value.map as any).setCenter(new TMap.LatLng(dataMap.value.latitude, dataMap.value.lngitude));
reloadMap();
} catch (error) {
console.log(error);
} }
};
// ip
const getLocation = () => {
jsonp('https://apis.map.qq.com/ws/location/v1/ip?key=SMJBZ-WCHK4-ZPZUA-DSIXI-XDDVQ-XWFX7&output=jsonp').then(res => {
myMap.setCenter(new window.TMap.LatLng(res.result.location.lat, res.result.location.lng))
setMarker(res.result.location.lat, res.result.location.lng)
})
}
//
const setMarker = async (lat: number, lng: number, isSelect: Boolean = false) => {
markerLayer.setMap(null);
markerLayer = new window.TMap.MultiMarker({
id: 'marker-layer',
map: myMap
});
markerLayer.add({
position: new window.TMap.LatLng(lat, lng),
});
myMap.setCenter(new TMap.LatLng(lat, lng))
myMap.getZoom() < 16 ? myMap.easeTo({ zoom: 16, rotation: 90 }, { duration: 2000 }) : ''
if (isSelect) return
var location = new window.TMap.LatLng(lat, lng);
let res = await geocoder.getAddress({ location: location })
locationInfo.value.address = res.result.address
locationInfo.value.title = res.result.formatted_addresses.recommend
}
//
const querySearch = async (queryString: string, cb: any) => { const querySearch = async (queryString: string, cb: any) => {
try { try {
let params = { let data = await jsonp(`https://apis.map.qq.com/ws/place/v1/suggestion/?key=SMJBZ-WCHK4-ZPZUA-DSIXI-XDDVQ-XWFX7&keyword=${queryString}&output=jsonp`);
keyword: queryString, data.data.forEach(item => {
key: "V4LBZ-UKCHA-EUNK7-CUH4F-HOXVO-YTF56", // key item.value = item.title
}; })
cb(data.data);
let { data } = await jsonp(`https://apis.map.qq.com/ws/place/v1/suggestion/?key=SMJBZ-WCHK4-ZPZUA-DSIXI-XDDVQ-XWFX7&keyword=${queryString}&output=jsonp`);
const results = data.map((item: any) => {
let obj = {
value: item.address,
address: item.address
};
return obj;
});
cb(results);
} catch (e) { } catch (e) {
console.log(e); console.log(e);
} }
}; };
const handleSelect = (e) => {
locationInfo.value.title = e.title
locationInfo.value.address = e.address
locationInfo.value.address = e.address
locationInfo.value.lat = e.location.lat
locationInfo.value.lng = e.location.lng
setMarker(e.location.lat, e.location.lng, true)
}
//
const getLocationByAddress = async () => {
let res = await jsonp(`https://apis.map.qq.com/ws/geocoder/v1/?key=SMJBZ-WCHK4-ZPZUA-DSIXI-XDDVQ-XWFX7&address=${locationInfo.value.address}&output=jsonp`);
if (!res.result) return feedback.msgError("位置搜索失败,请重新输入或手动选择")
setMarker(res.result.location.lat, res.result.location.lng)
}
onMounted(() => {
initMap()
})
</script> </script>