
<template>
    <el-form label-width="50px">
        <el-row>
            <el-col :span="10" style="margin-bottom: 20px;">
                <el-autocomplete
                    style="width: 100%"
                    v-model="state"
                    :fetch-suggestions="querySearchAsync"
                    placeholder="请输入地址"
                    clearable
                    @select="handleSelect"
                />
            </el-col>
            <!-- <el-col :span="12" style="padding-left:20px;">
                    <el-button type="primary">搜索</el-button>
                </el-col> -->
            <el-col :span="5">
                <el-form-item label="经度">
                <el-input v-model="lng" readonly style="width: 100%" />
                </el-form-item>
            </el-col>
                <el-col :span="5">
                <el-form-item label="纬度">
                <el-input v-model="lat" readonly style="width: 100%" />
                </el-form-item>
            </el-col>
            
            <el-col :span="4" style="padding-left:20px;">
                <el-button type="primary" @click="save">确定</el-button>
            </el-col>
        </el-row>
    </el-form>
    <div id="container" style="width: 100%; height: 600px;"></div>
  </template>
   
   <script setup lang="ts">
    import { jsonp } from 'vue-jsonp'
    import {ref,nextTick } from 'vue'
        const props = withDefaults(defineProps<{
            lng?:string|number,
            lat?:string|number
        }>(), {
            lng:116.397128,
            lat:39.916527
        })
        const emit = defineEmits<{
            chang: [latlng?:string]
        }>()


        let state = ref('')    
        let lat =  ref(props.lat?props.lat:'39.916527')    //经度
        let lng =  ref(props.lng?props.lng:'116.397128')    //维度

        async function querySearchAsync (queryString: string, cb:any) {
            const url = 'https://apis.map.qq.com/ws/place/v1/suggestion' // 关键字查询
                jsonp(url, {
                key: '3WDBZ-HMUCX-NIE43-ZPLQ4-OOHAO-OKBES', //ZJABZ-FWV6G-F7ZQ2-QKQKL-KQ3I5-DNBT7
                keyword: queryString,
                output: 'jsonp',
            }).then((res) => {
                console.log(res)
            if (res.status == 0) {
                // mapList.value = res.data;
                let listss
                listss = res.data.map((domain:any) => {
                    return {
                        value: domain.title ? domain.title + '--' + domain.address : domain.address,
                        location: domain.location
                    }
                })
                cb(listss)
                //return listss
                // callback(mapList.value);
            }else{
                cb([])
            }
            }).catch(() => {
                cb([])
            })
        }

        //function handleSelect() {}


        function handleSelect(v: any) {
            lat.value = v.location.lat.toFixed(6)
            lng.value = v.location.lng.toFixed(6)
            nextTick(() => {
              init()
            })
            
            // const url = "https://apis.map.qq.com/ws/geocoder/v1/";
            // jsonp (url, {
            // key:'3WDBZ-HMUCX-NIE43-ZPLQ4-OOHAO-OKBES', //"ZJABZ-FWV6G-F7ZQ2-QKQKL-KQ3I5-DNBT7",
            // output: 'jsonp',
            // address: address,
            // })
            // .then((res:any) => {
            //     console.log(res,'接口里面的数据？？')
            //     if (res.status === 0) {
            //     console.log(res)
            //     // 处理得到的经纬度
            //     lat.value = res.result.location.lat.toFixed(6);
            //     lng.value = res.result.location.lng.toFixed(6);
            //     nextTick(() => {
            //         debugger
            //         init(lat.value, lng.value); // 标记地图
            //         //setInitChange();
            //     });
            //     }
            // })
            // .catch((e: any) => {
            //     console.log(e);
            // });
        }

       //初始化地图函数  自定义函数名init    
        function init() {
            let map = new qq.maps.Map(document.getElementById('container'),{
                center: new qq.maps.LatLng(lat.value,lng.value),
                zoom: 13
            })

            //设置标记
           let marker:any = new qq.maps.Marker({
                position:new qq.maps.LatLng(lat.value,lng.value), 
                map:map
            });
            //marker.setPosition(event.latLng)
            //添加监听事件  获取鼠标点击事件
            qq.maps.event.addListener(map, 'click', function(event:any) {
                state.value = ''
                lat.value = event.latLng.lat.toFixed(6)
                lng.value = event.latLng.lng.toFixed(6)    
                // if(!marker) {
                //     marker = new qq.maps.Marker({
                //         position:event.latLng, 
                //         map:map
                //     });
                //     return
                // }
                marker.setPosition(event.latLng)
            })
        }
       //调用初始化函数地图
       nextTick(()=>{
           init()
       })

       function save() {
        emit('chang',lat.value?`${lng.value},${lat.value}`:'')
       }
   </script>
   
  <style>
  /* 样式按需添加 */
  </style>