vue后端管理系统使用腾讯地图

功能描述：打开地图选点，可以根据关键词搜索地点

组件代码

<template>
    <el-dialog title="选择地址" :visible.sync="open" width="800px" style="height: 800px" :modal="false" 
    :close-on-click-modal="false" append-to-body @open="openDialog" @close="closeDialog">
        <div>
            <div class="search-box">
                <div id="panel">
                    <!-- <p>输入关键字，将展示相关地点提示，点击提示可定位到该处。</p> -->
                    <input id='keyword' type="text" value='' placeholder="输入关键字，将展示相关地点提示，点击提示可定位到该处" @input="getSuggestions()">
                    <!-- <input id="search" type="button" class="btn" value="搜索" @click="searchByKeyword()" /> -->


                    <ul id="suggestionList">
                        <li class="resultTip" v-for="(item, index) in suggestionList" :key="index" @click="setSuggestion(index)">
                            {{item.title}}-{{item.address}}
                        </li>
                    </ul>
                </div>
            </div>

            <div id="mapContainer"></div>

        </div>

        <div slot="footer">
            <div style="display: flex; justify-content: center; flex: 1;">
                <div style="flex:1;text-align: left;">
                    <div>标记地址: {{addr.address}}</div>
                    <div>定位信息: {{addr.lng}}, {{addr.lat}}</div>
                </div>

                <el-button type="primary" @click="confirm">确定</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>

    var map = null;
    var search = null; // 新建一个地点搜索类
    var suggest = null;
    var marker = null;
    var infoWindowList = Array(10);
    var infoWindow = null
    let geocoder = null

    /**
     * 防抖函数
     * @param { function } fn  待执行的函数
     * @param { number } delay 等待时间
     */
    function debounce(fn, delay=1000) {
        var timer = null;
        return function (...e) {
            if (timer !== null) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                fn(...e)
            }, delay);
        }
    }


    export default {

        name: "TencentMap",
        props: {
            visible: { type: Boolean, default: false }, //是否显示

            defaultCity: { default: '长沙' }, //默认显示的城市
            level: { default: '150'}, //级别

            address: { type: String, default: '融城花园酒店' },
            lat: { type: [Number,String], default: 28.108996247772392},
            lng: { type: [Number,String], default: 113.01226447578324},
        },

        data(){
            return {
                addr: {
                    address: this.address,
                    lat: this.lat,
                    lng: this.lng,
                },

                suggestionList: [], //建议列表
            }
        },

        computed: {

            open: {
                get(){
                    return this.visible
                },
                set(val){
                    this.$emit("update:visible", val)
                }
            },

        },

        created() {
            this.getSuggestions = debounce(this.getSuggestions.bind(this), 500)
        },

        methods: {


            openDialog(){
                console.log("打开地图")
                this.addr = {
                    address: this.address,
                    lat: this.lat,
                    lng: this.lng,
                },
                setTimeout(() => {
                    this.initMap()
                }, 500);
            },

            closeDialog(){
                if(map){
                    map.destroy();
                }
            },

            initMap(){
                //定义地图中心点坐标
                var center = new TMap.LatLng(this.addr.lat, this.addr.lng)
                //定义map变量，调用 TMap.Map() 构造函数创建地图
                map = new TMap.Map(document.getElementById('mapContainer'), {
                    center: center,//设置地图中心点坐标
                    zoom: 17.2,   //设置地图缩放级别
                    // pitch: 43.5,  //设置俯仰角
                    rotation: 45    //设置地图旋转角度
                });

                // 新建一个正逆地址解析类
                geocoder = new TMap.service.Geocoder(); 

                //绑定点击事件
                map.on("click",(evt)=>{
                    console.log("点击腾讯地图", evt)
                    this.handleClickMap(evt)
                })


                this.$nextTick(()=>{
                    this.initMarker()
                    this.initInfoWindow()
                    this.initInput()
                })
            },

            // 初始化搜索
            initInput(){
                this.suggestionList = [];
                search = new TMap.service.Search({ pageSize: 10 }); // 新建一个地点搜索类
                suggest = new TMap.service.Suggestion({
                // 新建一个关键字输入提示类
                    pageSize: 10, // 返回结果每页条目数
                    // region: '长沙', // 限制城市范围
                    regionFix: true, // 搜索无结果时是否固定在当前城市
                });
            },

            getSuggestions() {
                // 使用者在搜索框中输入文字时触发
                this.suggestionList = []
                var keyword = document.getElementById('keyword').value;
                if (keyword) {
                    suggest.getSuggestions({ 
                        keyword: keyword, 
                        location: map.getCenter() 
                    }).then((result) => {
                        this.suggestionList = result.data;
                    }).catch((error) => {
                        console.log(error);
                    });
                }
            },

            setSuggestion(index) {
                const suggestionList = this.suggestionList
                console.log("建议选择", suggestionList[index])
                const item = suggestionList[index]
                this.addr = {
                    address: item.address,
                    lat: item.location.lat,
                    lng: item.location.lng,
                }
                document.getElementById('keyword').value = suggestionList[index].title;
                this.suggestionList = []

                this.setMarker()
            },

            searchByKeyword() {
                // 关键字搜索功能
                infoWindowList.forEach((infoWindow) => {
                    infoWindow.close();
                });
                infoWindowList.length = 0;
                marker.setGeometries([]);
                search.searchRectangle({
                    keyword: document.getElementById('keyword').value,
                    bounds: map.getBounds(),
                }).then((result) => {
                    result.data.forEach((item, index) => {
                        var geometries = markers.getGeometries();
                        var infoWindow = new TMap.InfoWindow({
                            map: map,
                            position: item.location,
                            content: `<h3>${item.title}</h3><p>地址：${item.address}</p><p>电话：${item.tel}</p>`,
                            offset: { x: 0, y: -50 },
                        });
                        infoWindow.close();
                        infoWindowList[index] = infoWindow;
                        geometries.push({
                            id: String(index),
                            position: item.location,
                        });
                        markers.updateGeometries(geometries);
                            markers.on('click', (e) => {
                            infoWindowList[Number(e.geometry.id)].open();
                        });

                    });
                });
            },

            confirm(){
                console.log("确认", this.addr)
                this.$emit("confirm", this.addr)
                this.open = false
            },



            // 处理点击地图
            handleClickMap(res){
                console.log("地图选点", res)
                // var lat = evt.latLng.getLat().toFixed(6);
                // var lng = evt.latLng.getLng().toFixed(6);
                this.addr.address = res.poi?.name
                this.addr.lat = res.latLng.lat
                this.addr.lng = res.latLng.lng

                this.setMarker()
            },

            initMarker(){
                marker = new TMap.MultiMarker({
                    map: map,
                    geometries: [{
                        "id": 'marker1',
                        "styleId": 'marker',
                        "position": new TMap.LatLng(this.addr.lat, this.addr.lng),
                        "properties": {
                            "title": "marker"
                        },
                    }],
                });

                //监听标注点击事件
                // marker.on("click", (e)=> {
                //     this.handleClickMarker(e)
                // })
            },

            //初始化infoWindow
            initInfoWindow(){
                infoWindow = new TMap.InfoWindow({
                    map: map,
                    position: new TMap.LatLng(39.984104, 116.307503),
                    offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素
                });
                infoWindow.close();
            },

            // 设置标注点
            setMarker(){
                let location = new TMap.LatLng(this.addr.lat, this.addr.lng)
                marker.setGeometries([])
                marker.add([{
                    "id": "0",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                    "position": location,  //点标记坐标位置
                }])
                map.setCenter({ 
                    lat: this.addr.lat,
                    lng: this.addr.lng
                 }); //设置中心

                // 将给定的坐标位置转换为地址
                geocoder.getAddress({ location: location }) .then((res) => {
                    this.addr.address = res.result.address
                    console.log("地址", this.addr.lat, this.addr.address )
                });
            },

            // 点击标注
            handleClickMarker(e){
                console.log("点击标注", e)
                // this.setInfoWindow()
            },


            // 设置信息窗口
            setInfoWindow(){
                infoWindow.open(); //打开信息窗
                infoWindow.setPosition(new TMap.LatLng(this.addr.lat, this.addr.lng));//设置信息窗位置
                infoWindow.setContent(this.addr.address);//设置信息窗内容
            },

        }
    }
</script>


<style lang="scss" scoped>
#mapContainer{
    height: 500px;
}

.search-box{
    position: relative;
    width: 100%;
    margin-bottom: 10px;

    input{
        height: 40px;
    }
}

#searchResultPanel{
    position: absolute;
    background-color: #fff;
}

#keyword{
    width: 100%;
    outline: none;
    border: 1px solid #1890FF;
    border-radius: 5px 0 0 5px;
    &:focus{
        box-shadow: 0 0 5px #83bef5;
    }
}

#search{
    width: 10%;
    background-color: #1890FF;
    border: 1px solid #1890FF;
    color: white;
}

#suggestionList{
    padding: 0;
    margin: 0;
    position: absolute;
    z-index: 9999;
    background-color: white;
    width: 100%;
    // border: 1px solid rgb(234, 246, 250);
    .resultTip{
        list-style: none;
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        &:hover{
            background-color: rgb(234, 246, 250);
        }
    }
}

</style>