add
This commit is contained in:
parent
b2b8b13503
commit
c5a70e321e
|
@ -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>
|
||||||
|
|
|
@ -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)
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
@ -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"的样式(styles的子属性名即为styleId)
|
|
||||||
"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>
|
Loading…
Reference in New Issue