add
This commit is contained in:
parent
b2b8b13503
commit
c5a70e321e
|
|
@ -63,4 +63,4 @@
|
|||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</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>
|
||||
<el-card>
|
||||
<div class="w-[600px]">
|
||||
{{ formData }}
|
||||
<div class="w-[900px]">
|
||||
<el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
|
||||
<el-tabs v-model="activeName" class="demo-tabs">
|
||||
<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-form-item>
|
||||
<el-form-item label="营业时间" prop="title">
|
||||
<el-time-picker v-model="formData.times" is-range range-separator="-" start-placeholder="开始时间"
|
||||
end-placeholder="结束时间" value-format="HH:mm:ss" />
|
||||
<el-time-picker v-model="formData.times" is-range range-separator="-"
|
||||
start-placeholder="开始时间" end-placeholder="结束时间" value-format="HH:mm:ss" />
|
||||
</el-form-item>
|
||||
<el-form-item label="门店地址" prop="title">
|
||||
<el-row>
|
||||
|
|
@ -44,7 +45,7 @@
|
|||
<el-form-item label="配送范围(km)" prop="title">
|
||||
<el-input-number v-model="formData.range" :step="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="门店详细地址" prop="title">
|
||||
<el-form-item label="门店详细地址" prop="title" class="w-[900px] h-[600px]">
|
||||
<myMap :formData="formData"></myMap>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
|
|
@ -94,6 +95,7 @@ const formData = reactive({
|
|||
store_name: '',
|
||||
status: 0,
|
||||
times: '',
|
||||
phone: "",
|
||||
province_id: "",
|
||||
city_id: '',
|
||||
area_id: '',
|
||||
|
|
@ -147,7 +149,8 @@ const setFormData = async (data: Record<any, any>) => {
|
|||
onMounted(() => {
|
||||
apiGetStore().then(res => {
|
||||
setFormData(res)
|
||||
console.log(formData)
|
||||
// console.log('res', res)
|
||||
// console.log('formData', formData)
|
||||
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -1,172 +1,110 @@
|
|||
<template>
|
||||
<div>
|
||||
{{ dataMap.latitude }}-{{ dataMap.lngitude }}
|
||||
<!-- {{ formData }} -->
|
||||
<div class="mb-6">
|
||||
<el-autocomplete v-model="address" :fetch-suggestions="querySearch" placeholder="请输入详细地址"
|
||||
: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>
|
||||
<el-autocomplete class="w-[500px]" v-model="locationInfo.title" @select="handleSelect"
|
||||
:fetch-suggestions="querySearch" placeholder="请输入详细地址" :trigger-on-focus="false" />
|
||||
<el-button type="primary" @click="getLocationByAddress">搜索</el-button>
|
||||
<el-button type="primary" @click="getLocation">当前位置</el-button>
|
||||
<div id="myMap" class="w-[100%] h-[100%]"></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, reactive, ref, defineProps } from 'vue';
|
||||
import { ref, onMounted } from "vue"
|
||||
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({
|
||||
formData: {
|
||||
type: Object,
|
||||
}
|
||||
})
|
||||
let locationInfo = ref({
|
||||
address: "",
|
||||
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) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
const initMap = () => {
|
||||
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) => {
|
||||
let lavting = evt.latLng
|
||||
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);
|
||||
setMarker(evt.latLng.getLat(), evt.latLng.getLng())
|
||||
}
|
||||
};
|
||||
|
||||
// 根据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) => {
|
||||
try {
|
||||
let params = {
|
||||
keyword: queryString,
|
||||
key: "V4LBZ-UKCHA-EUNK7-CUH4F-HOXVO-YTF56", // 填申请到的腾讯key
|
||||
};
|
||||
|
||||
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);
|
||||
let data = await jsonp(`https://apis.map.qq.com/ws/place/v1/suggestion/?key=SMJBZ-WCHK4-ZPZUA-DSIXI-XDDVQ-XWFX7&keyword=${queryString}&output=jsonp`);
|
||||
data.data.forEach(item => {
|
||||
item.value = item.title
|
||||
})
|
||||
cb(data.data);
|
||||
} catch (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>
|
||||
Loading…
Reference in New Issue