qimall/backend/views/components/common/com-amap.php

<!-- 地图选择地址组件（高德版本） -->
<template id="com-amap">
    <div id="amap-container">

        <el-input id="search-input" v-model="searchValue" class="input-with" placeholder="请输入地址" clearable @clear="handelclearInput" @keyup.native.enter="handelSearch">
            <el-button slot="append" size="small" type="primary" icon="el-icon-search" @click="handelSearch">搜索</el-button>
        </el-input>

        <el-row class="address-space">
            <div class="address-space-show">
                <el-input :value="getShowAddressText()" :disabled="true">
                    <template slot="prepend">当前地址是：</template>
                </el-input>
                <el-button size="small" type="primary" class="confirm-btn" @click="handelSave">使用该地址</el-button>
            </div>
        </el-row>
        <el-row>
            <el-col :span="16">
                <div id="lan-amap"></div>
            </el-col>
            <el-col :span="8">
                <div id="searchResultPanel"></div>
            </el-col>
        </el-row>
    </div>
</template>
<!-- 使用前请先登录高德开发者平台，申请应用，使用真实的key和安全秘钥才能正常使用 -->

<script type="text/javascript">
    let securityJsCode = "<?= \Yii::$app->services->setting->platform->get('map.amap_jsapi_secret') ?>"
    console.log('securityJsCode', securityJsCode)
    window._AMapSecurityConfig = {
        securityJsCode: securityJsCode,
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.4&key=<?= \Yii::$app->services->setting->platform->get('map.amap_jsapi_key') ?>"></script>
<script>
    const AMap = window.AMap;

    Vue.component('com-amap', {
        template: '#com-amap',
        props: {
            defaultValue: {
                type: String,
                default: function() {
                    return ''
                }
            },
            longitude: {
                type: Number,
                default: function() {
                    return 0.00
                }
            },
            latitude: {
                type: Number,
                default: function() {
                    return 0.00
                }
            }
        },
        data() {
            return {
                defaultCity: "北京",
                // 地图对象
                map: null,
                // 定位默认地址 | 搜索后选择的地址
                formattedAddress: null,
                // 地址对应的经纬度信息
                position: {},
                // 检索关键字
                searchValue: "",
                // 检索函数对象
                placeSearch: null,
                // 检索结果数据数据
                searchInfoList: [],
                // 地图标记
                marker: "",
                // 地址解析（正向）
                geocoder: "",
                // 地址名称
                name: "",
                lat: '',
                lng: '',
            };
        },
        watch: {
            defaultValue: {
                immediate: true,
                handler(val) {
                    this.searchValue = val
                },
            },
            latitude: {
                immediate: true,
                handler(val) {
                    this.lat = val
                },
            },
            longitude: {
                immediate: true,
                handler(val) {
                    this.lng = val
                },
            },
        },
        mounted() {
            // 初始化地图页面
            this.initMap();
        },
        beforeDestroy() {
            // 销毁地图
            this.map.destroy();
        },
        methods: {
            //   初始化地图页面
            initMap() {
                this.map = new AMap.Map("lan-amap", {
                    resizeEnable: true,
                    zoom: 50
                });
                // 添加工具栏
                this.map.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.OverView"], () => {
                    // 工具条
                    const toolbar = new AMap.ToolBar();
                    // 比例尺
                    const scale = new AMap.Scale();
                    // 显示鹰眼
                    const overView = new AMap.OverView();
                    this.map.addControl(toolbar);
                    this.map.addControl(scale);
                    this.map.addControl(overView);
                });
                // 添加maker
                this.setMaker();
                // 添加鼠标点选地图选择地址
                this.addAmapGeocoder();
                // 添加定位
                this.addAMapGeolocation();
                // 添加检索提示
                this.addAMapAutocompletePlaceSearch();

                if (this.defaultValue) {
                    this.handelSearch()
                    this.formattedAddress = this.defaultValue
                }
            },
            // 添加maker
            setMaker() {
                this.marker = new AMap.Marker();
                this.map.add(this.marker);
                // 添加解析地理位置插件
                this.map.plugin("AMap.Geocoder", () => {
                    // 异步加载插件
                    this.geocoder = new AMap.Geocoder({
                        city: this.defaultCity, // 默认：“全国”
                        radius: 1000 // 范围，默认：500
                    });
                });
            },
            // 添加鼠标点选地图选择地址
            addAmapGeocoder() {
                // 添加maker
                this.setMaker();
                // 地图添加点击事件
                this.map.on("click", e => {
                    const lnglat = [e.lnglat.lng, e.lnglat.lat];
                    this.marker.setPosition(lnglat);
                    this.geocoder.getAddress(lnglat, (status, result) => {
                        if (status === "complete" && result.regeocode) {
                            const res = result.regeocode;
                            const data = {
                                // 地址名称
                                adress: res.formattedAddress,
                                // 纬度lat
                                lat: lnglat[1],
                                // 经度lng
                                lng: lnglat[0]
                            };
                            this.formattedAddress = res.formattedAddress;
                            this.position = data;
                            this.lng = lnglat[0]
                            this.lat = lnglat[1]
                        } else {
                            alert(JSON.stringify(result));
                        }
                    });
                });
            },
            // 添加自动定位
            addAMapGeolocation() {
                this.map.plugin("AMap.Geolocation", () => {
                    const geolocation = new AMap.Geolocation({
                        // 是否使用高精度定位，默认：true
                        enableHighAccuracy: true,
                        // 设置定位超时时间，默认：无穷大
                        timeout: 10000,
                        // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                        buttonOffset: new AMap.Pixel(200, 200),
                        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                        zoomToAccuracy: true,
                        //  定位按钮的排放位置,  RB表示右下
                        buttonPosition: "RB"
                    });
                    // 获取当前位置
                    geolocation.getCurrentPosition();
                    // 添加定位当前城市成功监听
                    AMap.event.addListener(
                        geolocation,
                        "complete",
                        this.onCurrentPositionComplete
                    );
                    // 添加定位当前城市发生错误监听
                    AMap.event.addListener(
                        geolocation,
                        "error",
                        this.onCurrentPositionError
                    );
                });
            },
            // 添加检索提示检索
            addAMapAutocompletePlaceSearch() {
                // 自动提示
                this.map.plugin("AMap.Autocomplete", () => {
                    const auto = new AMap.Autocomplete({
                        city: this.defaultCity,
                        input: "search-input"
                    });
                    // 添加检索监听
                    AMap.event.addListener(auto, "select", this.onSelectAutocomplete);
                });
                // 检索服务
                AMap.service(["AMap.PlaceSearch"], () => {
                    // 构造地点查询类
                    this.placeSearch = new AMap.PlaceSearch({
                        type: "", // 兴趣点类别
                        pageSize: 5, // 单页显示结果条数
                        pageIndex: 1, // 页码
                        city: this.defaultCity, // 兴趣点城市
                        citylimit: false, // 是否强制限制在设置的城市内搜索
                        map: this.map, // 展现结果的地图实例
                        panel: "searchResultPanel", // 结果列表将在此容器中进行展示。
                        autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                    });
                });
                // 添加检索监听
                AMap.event.addListener(
                    this.placeSearch,
                    "listElementClick",
                    this.onSelectSearch
                );
            },
            // 定位当前城市成功回调
            onCurrentPositionComplete(res) {
                // 添加maker
                this.setMaker();
                const lnglat = [res.position.lng, res.position.lat];
                this.marker.setPosition(lnglat);
                console.log(res, "res");
                this.formattedAddress = res.formattedAddress;
                this.position = res.position;

                this.lng = res.position.lng
                this.lat = res.position.lat
            },
            // 定位当前城市发生错误回调
            onCurrentPositionError(err) {
                console.log(err);
            },
            // 按钮触发检索
            handelSearch() {
                this.placeSearch.search(this.searchValue, (status, info) => {
                    this.searchInfoList = info.poiList.pois;
                });
            },
            // 选择自动提示数据事件回调
            onSelectAutocomplete(e) {
                this.searchValue = e.poi.name;
                this.handelSearch();
            },
            // 选择检索数据结果事件回调
            onSelectSearch(e) {
                const res = e.data;
                this.formattedAddress = res.cityname + res.adname + res.address;
                this.name = res.name;
                this.position = res.location;
                let lng = e.data.location.lng
                let lat = e.data.location.lat
                this.lng = lng
                this.lat = lat
            },
            // 清除input里的值，清除搜索结果，再次初始化map
            handelclearInput() {
                document.querySelector("#searchResultPanel").innerHTML = "";
            },
            // 保存当前选择的地址,分发事件
            handelSave() {
                this.searchValue = this.formattedAddress;
                const {
                    lat,
                    lng
                } = this.position;
                const data = {
                    name: this.name,
                    // 地址名称
                    address: this.formattedAddress,
                    // 纬度lat
                    lat,
                    // 经度lng
                    lng
                };
                this.$emit("get-position", data);
            },
            getShowAddressText() {
                if (this.formattedAddress) {
                    return `${this.formattedAddress} [${this.lng} , ${this.lat}]`
                }
                return ''
            }
        }
    })
</script>
<style lang="scss">
    #amap-container {
        width: 100%;
    }

    #searchResultPanel {
        margin-top: 10px;
    }

    #amap-container .el-input__clear {
        line-height: 34px;
    }

    #amap-container #lan-amap {
        height: 60vh;
        margin-top: 10px;
        border: 1px solid #ccc;
    }

    #amap-container .input-with {
        /* position: fixed; */
        /* top: 40px; */
        z-index: 1;
    }

    #amap-container .address {
        color: #373737;
    }

    .amap-sug-result {
        z-index: 99999;
    }

    .address-space {
        padding: 10px 0;
    }

    .address-space-show {
        display: flex;
        align-items: center;
    }

    .address-space div.el-input-group__append {
        background-color: #409eff;
        color: #fff;
        cursor: pointer;
    }

    .address-space .confirm-btn {
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;

    }
</style>