移动端封装map 组件，调起高德地图

封装的map.vue

<template>
    <view>
        <map id="popMap" ref="maps" :longitude="longitude" :latitude="latitude" scale="14" :markers="markers"
            @tap="onMapTap" @click="onMapClick" @regionchange="onRegionChange" show-location
            style="width: 750rpx; height: 100vh;"></map>
    </view>
</template>

<script>
    import amapPlugin from "@amap/amap-jsapi-loader";
    export default {
        data() {
            return {
                // 初始化地图的位置
                longitude: 118.020013,
                latitude: 37.461536,
                markers: [ // 设置标记点
                    {
                        latitude: 118.020013,
                        longitude: 37.461536,
                        title: 'New York City',
                        iconPath: '/static/mapLocation.png',
                    },
                ],
            };
        },
        onReady() {
            // 高德地图API初始化
            this.initAmap();
            this.addMapEvent()
        },
        mounted() {
            // this.addMapEvent()
        },
        methods: {
            initAmap() {
                console.log('111');
                // 高德地图API初始化代码，需要自行获取key
                amapPlugin.initAMapApi('13254965e7ab4c469911c1256a2b129e');
            },
            onRegionChange(e) {
                // 当地图区域发生变化时，更新位置
                return
                if (e.type === 'end') {
                    console.log(e);
                    this.longitude = e.detail.centerLocation.longitude;
                    this.latitude = e.detail.centerLocation.latitude;
                    this.markers[0].longitude = this.longitude
                    this.markers[0].latitude = this.latitude
                    // 使用高德地图API进行逆地理编码查询地址信息
                    this.reverseGeocode()
                    // uni.getLocation({
                    //     longitude: this.longitude,
                    //     latitude: this.latitude,
                    //     success: (res) => {
                    //         console.log(res, '成功');
                    //         this.reverseGeocode()
                    //         // 调用高德API进行逆地理编码
                    //         // amapPlugin.reverseGeocode({
                    //         //     location: `${this.longitude},${this.latitude}`,
                    //         //     success: (data) => {
                    //         //         // 成功获取地址信息
                    //         //         console.log(data.address);
                    //         //     },
                    //         //     fail: () => {
                    //         //         // 获取地址失败处理
                    //         //     }
                    //         // });
                    //     }
                    // });
                }
            },
            onMapTap(e) {
                console.log('地图被点击了', e)
                let that = this;
                console.log(this.$refs.maps, 'maps')
                // var maps = uni.createMapContext(e.target.id, this);
                // console.log(maps, 'maps');
                // console.log(maps.pageVm, '0000')

                // this.$refs.maps.onclick = function(point) {
                //     console.log(point, 'point')
                // }
            },
            onMapClick(e) {
                console.log(e, 'click点击');
            },
            reverseGeocode(e) {
                const {
                    longitude,
                    latitude
                } = this.markers[0];
                const key = '13254965e7ab4c469911c1256a2b129e'; // 替换为你的高德API密钥
                const url = `https://restapi.amap.com/v3/geocode/regeo?key=${key}&location=${longitude},${latitude}`;

                uni.request({
                    url,
                    success: ({
                        data
                    }) => {
                        if (data.status === '1') {
                            console.log(data, '反显成功');
                            // uni.showModal({
                            //     title: '地址信息',
                            //     content: data.regeocode.formatted_address,
                            //     showCancel: false
                            // });
                        } else {
                            uni.showToast({
                                title: '逆地理编码失败',
                                icon: 'none'
                            });
                        }
                    },
                    fail: () => {
                        uni.showToast({
                            title: '请求失败',
                            icon: 'none'
                        });
                    }
                });
            },
            addMapEvent() {
                console.log('点击时间', uni.createMapContext);
                let that = this;
                var maps = this.$refs.maps //uni.createMapContext("popMap", this).$getAppMap();
                console.log(maps, 'maps');
                maps.onclick = function(point) {
                    console.log(point, "point")
                    that.longitude = point.longitude
                    that.latitude = point.latitude
                    that.covers = [];
                    that.covers = [{
                        id: 2, //点击时候是第二次作为标记点定义。id为2，不能重复
                        latitude: point.latitude,
                        longitude: point.longitude,
                        iconPath: img,
                        fontSize: 80,
                        title: "所选位置"
                    }]
                }
            }
        }
        // //根据地址获取经纬度
        // geoApi = (address) => axios(
        //     'http://restapi.amap.com/v3/geocode/geo',
        //     'GET', {
        //         address,
        //         key
        //     }
        // )

    };
</script>

使用时，直接引入组件，该传参传参，该接收接收