add

index.html

@@ -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>

src/views/storesSet/index.vue

@@ -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="开始时间"
+                            <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 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)
 
     })
 

src/views/storesSet/myMap/index.vue

@@ -1,172 +1,110 @@
 <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>
+
 <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({
+let locationInfo = ref({
-    formData: {
+    address: "",
-        type: Object,
+    title: "",
-    }
+    lat: "",
+    lng: ""
+
 })
 
-const dataMap = ref({
-    map: '',
-    markerLayer: '',
-    latitude: props.formData.lat, //纬度
-    lngitude: props.formData.lng, //经度
-});
 
-
+const initMap = () => {
-watch(
+    var center = new window.TMap.LatLng(30.629673, 103.775231)
-    dataMap.value,
+    myMap = new window.TMap.Map(document.getElementById('myMap'), {
-    (val: boolean) => {
+        center: center,
-        props.formData.lat = val.latitude;
+        zoom: 15,
-        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); // 绑定点击地图获取地理位置的事件
+    myMap.on('click', clickHandler);
-    markerLayer(); // 标记地图
+    markerLayer = new window.TMap.MultiMarker({
-};
+        id: 'marker-layer',
-// 重载地图
+        map: myMap
-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();
+    geocoder = new window.TMap.service.Geocoder()
-};
-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 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
+    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
+// 根据ip定位
-    dataMap.latitude = evt.latLng.getLat().toFixed(6);
+const getLocation = () => {
-    dataMap.lngitude = evt.latLng.getLng().toFixed(6);
+    jsonp('https://apis.map.qq.com/ws/location/v1/ip?key=SMJBZ-WCHK4-ZPZUA-DSIXI-XDDVQ-XWFX7&output=jsonp').then(res => {
-    // (dataMap.map as any).setCenter(new TMap.LatLng(dataMap.latitude, dataMap.lngitude));
+        myMap.setCenter(new window.TMap.LatLng(res.result.location.lat, res.result.location.lng))
-    reloadMap();
+        setMarker(res.result.location.lat, res.result.location.lng)
-};
-//标记地图 
-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
+const setMarker = async (lat: number, lng: number, isSelect: Boolean = false) => {
-                "styleId": 'myStyle',  //指定样式id
+    markerLayer.setMap(null);
-                "position": new TMap.LatLng(dataMap.value.latitude, dataMap.value.lngitude),  //点标记坐标位置
+    markerLayer = new window.TMap.MultiMarker({
-            },
+        id: 'marker-layer',
-        ]
+        map: myMap
     });
-};
+    markerLayer.add({
-const address = ref('');
+        position: new window.TMap.LatLng(lat, lng),
-// 获取搜索经纬度
+    });
-const getLocations = async () => {
+    myMap.setCenter(new TMap.LatLng(lat, lng))
-    try {
+    myMap.getZoom() < 16 ? myMap.easeTo({ zoom: 16, rotation: 90 }, { duration: 2000 }) : ''
-        let { result } = await jsonp(`https://apis.map.qq.com/ws/geocoder/v1/?key=SMJBZ-WCHK4-ZPZUA-DSIXI-XDDVQ-XWFX7&address=${address.value}&output=jsonp`);
+    if (isSelect) return
-        dataMap.value.latitude = result.location.lat;
+    var location = new window.TMap.LatLng(lat, lng);
-        dataMap.value.lngitude = result.location.lng;
+    let res = await geocoder.getAddress({ location: location })
-        (dataMap.value.map as any).setCenter(new TMap.LatLng(dataMap.value.latitude, dataMap.value.lngitude));
+    locationInfo.value.address = res.result.address
-        reloadMap();
+    locationInfo.value.title = res.result.formatted_addresses.recommend
-    } catch (error) {
+
-        console.log(error);
+}
-    }
+
-};
+// 搜索提示
 const querySearch = async (queryString: string, cb: any) => {
     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) {
         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>