腾讯地图定位模糊搜索

@草莓小布丁

于 2024-05-31 13:30:31 发布

阅读量1.1k

点赞数 12

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_52441253/article/details/139350094

版权

使用腾讯地图定位模糊搜索

申请腾讯地图ak

创建地图组件

<template>
    <div>
        <el-dialog :visible.sync="value" :close-on-click-modal="false" :before-close="clearDialog" title="获取定位"
                   width="50%">
            <el-form>
                <el-form-item label="经度" prop="longitude">
                    <el-input style="width: 200px" v-model="form.longitude"></el-input>
                </el-form-item>
                <el-form-item label="纬度" prop="latitude">
                    <el-input style="width: 200px" v-model="form.latitude"></el-input>
                </el-form-item>
                <div class="map-search">
                    <el-input style="width:400px" id="searchValue" v-model="searchValue" placeholder="请输入要检索的位置信息"
                              @input="searchSuggestionAPI(searchValue)" />
                    <el-button @click="searchSuggestionAPI(searchValue)" type="primary">搜索</el-button>
                    <ul id="suggestionList">
                        <li class="suggestion-li" v-for="(item, index) in suggestionList" :key="index"
                            @click="selectSuggestionHandle(item)">
                            <p class="suggestion-li-title">{{ item.title }}</p>
                            <p class="suggestion-li-content">{{ item.address }}</p>
                        </li>
                    </ul>
                </div>
                <el-form-item>
                    <div class="map-box">
                        <div class="map" ref="map" style="height: 400px" />
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" type="primary" @click="btnSubmit">确 认</el-button>
                <el-button size="small" @click="clearDialog">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchValue: '', //地图搜索
            form: {
                longitude: '',
                latitude: '',
                address: ''
            },
            searchEr: "",
            suggestionList: []
        };
    },
    props: {
        value: {
            type: Boolean,
            default: false
        },
        companyInfo: {
            type: Object,
            default: () => ({})
        }
    },
    watch: {
        companyInfo: {
            handler(val) {
                this.form.latitude = val.latitude;
                this.form.longitude = val.longitude;
                if (this.script) return;
                this.script = document.createElement('script');
                this.script.type = 'text/javascript';
                this.script.src = `//map.qq.com/api/gljs?v=1.exp&libraries=service&key=AK`;
                document.head.appendChild(this.script);
                this.script.onload = () => {
                    window.initMap = this.initMap;
                    this.$nextTick(() => {
                        this.initMap();
                    });
                };
            },
            deep: true,
            immediate: true
        }
    },
    mounted() {},
    methods: {
        // 地图
        initMap() {
            let lat = this.form.latitude ? this.form.latitude : 30.173347;
            let lng = this.form.longitude ? this.form.longitude : 120.141937;
            // 地图主类
            this.map = new window.TMap.Map(this.$refs.map, {
                backgroundColor: '#f7f7f7',
                mapStyleId: 'style1',
                zoom: 17,
                mapTypeControlOptions: {
                    mapTypeIds: [],
                },
                draggableCursor: 'crosshair',
                center: new window.TMap.LatLng(lat, lng),
            });
            // 图层类 多个标注点
            this.markerLayer = new window.TMap.MultiMarker({
                map: this.map,
                geometries: [],
            });
            // 地址逆解析
            this.geocoder = new window.TMap.service.Geocoder();
            this.map.on('click', (e) => {
                this.form.longitude = e.latLng.getLng(); // 经度
                this.form.latitude = e.latLng.getLat(); // 纬度
                this.setMarker();
 
            });
            if (this.form.longitude) {
                this.map.setCenter(new window.TMap.LatLng(this.form.latitude,this.form.longitude));
                this.setMarker();
            }
        },
        searchSuggestionAPI(keyword) {
            // 新建一个关键字输入提示类  返回结果每页条目数
            this.searchEr = new window.TMap.service.Suggestion({ pageSize: 10 });
            this.searchEr.getSuggestions({ keyword: keyword }).then((result) => {
                // 以当前所输入关键字获取输入提示
                this.suggestionList = result.data;
            }).catch((error) => {
               this.$message.warning("未搜索到相关地址，请重新输入");
            });
        },
        clearDialog() {
            this.$emit("input", false)
        },
        // 更新定位
        btnSubmit() {
            let key = {
                address: this.form.address,
                latitude: this.form.latitude,
                longitude: this.form.longitude,
            };
            this.$emit("getTenAddress", key);
            this.clearDialog();
        },
        selectSuggestionHandle(item) {
            const { location, title, address } = item;
            this.form.address = address;
            this.searchAddress = title;
            this.form.latitude = location.lat;
            this.form.longitude = location.lng;
            this.suggestionList = [];
            this.setMarker();
            this.map.setCenter(new TMap.LatLng(this.form.latitude, this.form.longitude)); //设置中心点
        },
        // 设置标注点
        setMarker() {
            const latlng = new window.TMap.LatLng(this.form.latitude, this.form.longitude);
            this.markerLayer.setGeometries([]); //清除标注
            let geometries = this.markerLayer.getGeometries(); //获取标注数据
            geometries.push({
                id: '-1',
                position: latlng,
            });
            this.markerLayer.updateGeometries(geometries);
        }
    },
};
</script>

<style scoped lang="scss">
.map-search {
    margin-bottom: 10px;
    position: relative;
}
.address {
    margin-top: 15px;
    margin-bottom: 10px;
    .el-button {
        padding: 0;
    }
}
#suggestionList {
    border-radius: 8px;
    width: 400px;
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;
    position: absolute;
    top: 40px;
    left: 0px;
    z-index: 1009;
    display: flex;
    flex-direction: column;
    .suggestion-li {
        width: 91.47%;
        margin: auto;
        display: flex;
        flex-direction: column;
        padding: 5px 0px;
        cursor: pointer;
        .suggestion-li-title {
            font-size: 16px;
            color: #333;
        }
        .suggestion-li-content {
            font-size: 15px;
            color: #999;
            margin-top: 5px;
        }
    }
}
</style>

父组件中引入

<el-form-item label="考勤地址" class="addressStyle">
    <el-input  v-model="company.attendanceAddress" class="inputClass" placeholder="请选择地址" @change="openMap">
        <el-button slot="append" icon="el-icon-location" @click="openMap"></el-button>
    </el-input>
</el-form-item>
<!-- 地图 -->
<TMap v-model="popup2" v-if="popup2" @getTenAddress="getTenXunAddress" :companyInfo="company"></TMap>

<script>
    export default {
	name: 'company_base_info',
    components: {
        TMap
    },
        data() {
            return {
                popup2: false,
                company: {
                    attendanceAddress: '',
                    latitude: '',
                    longitude: ''
                }
            }
        }
methods: {
    // 打开地图弹窗
    openMap() {
        this.popup2 = true;
    },
    getTenXunAddress(value){
            this.company.attendanceAddress = value.address;
            this.company.longitude = value.longitude;
            this.company.latitude = value.latitude;
     },
}
</script>