vue3使用腾讯地图(‘关键词搜索、逆地址解析‘)

 1.登录腾讯地图位置服务进入控制台

• 申请腾讯地图开发者
• 进入控制台申请自己的key

腾讯位置服务 - 立足生态，连接未来

 

 2.进入vue项目的public文件下的index.html

引入腾讯资源包，并把申请的key填入

 3.创建地图容器

 4.初始化地图、设置标记点并开启拖拽监听

import { reactive, toRefs, getCurrentInstance, Transition, watch } from 'vue';
export default {
    setup() {
        const {proxy} = getCurrentInstance(); // proxy想当于vue2的this
        let data = reactive({
            lng: 116.40396298757886,
            lat: 39.91511908708907,
            map: null,
            searchResults: [], // 存储搜索结果
            marker: [],
            locations: "",
            drapClik: true,
            showDrap: false,
        });
        const methods = {
            // 初始化地图
            initMap: function () {
                //定义地图中心点坐标
                let center = new qq.maps.LatLng(data.lat, data.lng);
                var myOptions = {
                    zoom: 17,
                    center: center,
                    mapTypeId: qq.maps.MapTypeId.ROADMAP,
                };
                data.map = new qq.maps.Map(document.getElementById("map"), myOptions);

                // 设置标记点
                data.marker = new qq.maps.Marker({
                    position: center,
                    map: data.map,
                });
                // 监听标记点拖拽事件
                data.marker.setDraggable(true);
                qq.maps.event.addListener(data.marker, "dragend", function (e) {
                    // 监听标记拖动
                    var latLng = data.marker.getPosition();
                    data.map.setCenter(latLng);
                    let lats = latLng.lat.toFixed(6);
                    let lng = latLng.lng.toFixed(6);
                    data.locations = `${lats},${lng}`;
                    methods.filteredResults();
                });
            },
        }
        proxy.$nextTick(()=>{
            methods.initMap();
        })
    }
}

5.拖拽标记点获取点位信息，进行逆地址解析

• 前提：为解决跨域需要使用vue-jsonp来联调腾讯地图服务端接口

•  WebService API官网：WebService API | 腾讯位置服务
• 安装vue-jsonp

       npm安装： npm i vue-jsonp -S

       yarn安装： yarn add vue-jsonp

 6.引入入vue-jsonp并联调逆地址解析

import { jsonp } from "vue-jsonp";             
            // 逆地址解析
            filteredResults: function () {
                jsonp("https://apis.map.qq.com/ws/geocoder/v1", {
                key: "",
                location: '',
                output: "jsonp", // output必须jsonp   不然会超时
                })
                .then((res) => {
                    if (res.status == 0) {
                        // 通过地址得到经纬度
                        data.warehouseForm.search_address = res.result.address;
                        let center = new qq.maps.LatLng(
                            res.result.location.lat,
                            res.result.location.lng
                        );
                        data.map.panTo(center); // 重新设置地图中心点
                        data.lng = res.result.location.lng;
                        data.lat = res.result.location.lat;
                        data.warehouseForm.longitude = data.lng;
                        data.warehouseForm.latitude = data.lat;
                        methods.focus();
                        methods.suggestion();
                    } else {
                        proxy.$messages.error(res.message);
                        data.searchResults = [];
                    }
                })
                .catch(() => {
                    // search_btn.value = false
                    data.searchResults = [];
                });
            },

7.关键词搜索

            // 关键词搜索
            suggestion: function () {
                jsonp("https://apis.map.qq.com/ws/place/v1/suggestion", {
                key: "",
                keyword: '',
                output: "jsonp", // output必须jsonp   不然会超时
                })
                .then((res) => {
                    if (res.status == 0) {
                        data.searchResults = res.data.map(item => ({value: item.location ,label: `${item.title} ${item.address}`}));
                    } else {
                        data.searchResults = [];
                        proxy.$messages.error(res.message);
                    }
                })
                .catch(() => {
                    data.searchResults = [];
                });
            },

8.封装AutoComplete

由于使用ant-design的AutoComplete自动完成组件出现报错并不知原因选择自己简单封装

完整代码 ：

效果：