HY.butcher.client/src/components/map/Amap.vue

<template>
    <div class="container">
        <div class="search-box">
            <el-input
                v-model="searchKey"
                @keyup.enter.native="searchByHand"
                placeholder="请输入内容"
                class="input-with-select"
            >
                <el-button slot="append" icon="el-icon-search" @click="searchByHand"></el-button>
            </el-input>
            <!-- <input v-model="searchKey" type="search" id="search" />
            <button @click="searchByHand">搜索</button>-->
            <div class="tip-box" id="searchTip"></div>
        </div>
        <!--
          amap-manager： 地图管理对象
          vid：地图容器节点的ID
          zooms： 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19]
          center： 地图中心点坐标值
          plugin：地图使用的插件
          events： 事件
        -->
        <el-amap
            class="amap-box"
            :amap-manager="amapManager"
            :vid="'amap-vue'"
            :zoom="zoom"
            :plugin="plugin"
            :center="center"
            :events="events"
            mapStyle="fresh"
        >
            <!-- 标记 -->
            <el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker>
        </el-amap>
    </div>
</template>



<script>
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";

let amapManager = new AMapManager();
export default {
    data() {
        let _this = this;
        return {
            address: null,
            searchKey: "",
            amapManager,
            markers: [],
            searchOption: {
                city: "全国",
                citylimit: true
            },
            center: [121.329402, 31.228667],
            zoom: 17,
            lng: 0,
            lat: 0,
            loaded: false,
            events: {
                init() {
                    lazyAMapApiLoaderInstance.load().then(() => {
                        _this.initSearch();
                    });
                },
                // 点击获取地址的数据
                click(e) {
                    _this.markers = [];
                    let { lng, lat } = e.lnglat;
                    _this.lng = lng;
                    _this.lat = lat;
                    _this.center = [lng, lat];
                    _this.markers.push([lng, lat]);
                    // 这里通过高德 SDK 完成。
                    let geocoder = new AMap.Geocoder({
                        radius: 1000,
                        extensions: "all"
                    });
                    console.log(geocoder);
                    geocoder.getAddress([lng, lat], function(status, result) {
                        if (status === "complete" && result.info === "OK") {
                            if (result && result.regeocode) {
                                _this.address =
                                    result.regeocode.formattedAddress;
                                _this.searchKey =
                                    result.regeocode.formattedAddress;
                                _this.$nextTick();
                            }
                        }
                    });
                }
            },
            // 一些工具插件
            plugin: [
                // {
                //   pName: 'Geocoder',
                //   events: {
                //     init (o) {
                //       console.log(o.getAddress())
                //     }
                //   }
                // },
                {
                    // 定位
                    pName: "Geolocation",
                    events: {
                        init(o) {
                            // o是高德地图定位插件实例
                            o.getCurrentPosition((status, result) => {
                                console.log(result);
                                if (result && result.position) {
                                    // 设置经度
                                    _this.lng = result.position.lng;
                                    // 设置维度
                                    _this.lat = result.position.lat;
                                    // 设置坐标
                                    _this.center = [_this.lng, _this.lat];
                                    _this.markers.push([_this.lng, _this.lat]);
                                    // load
                                    _this.loaded = true;
                                    // 页面渲染好后
                                    _this.$nextTick();
                                }
                            });
                        }
                    }
                },
                {
                    // 工具栏
                    pName: "ToolBar",
                    events: {
                        init(instance) {
                            console.log(instance);
                        }
                    }
                },
                {
                    // 鹰眼
                    pName: "OverView",
                    events: {
                        init(instance) {
                            console.log(instance);
                        }
                    }
                },
                
                {
                    // 搜索
                    pName: "PlaceSearch",
                    events: {
                        init(instance) {
                            console.log(instance);
                        }
                    }
                }
            ]
        };
    },
    methods: {
        initSearch() {
            let vm = this;
            let map = this.amapManager.getMap();
            AMapUI.loadUI(
                [
                    "overlay/SimpleMarker", //SimpleMarker
                    "overlay/SimpleInfoWindow" //SimpleInfoWindow
                ],
                function(SimpleMarker, SimpleInfoWindow) {
                    console.dir(SimpleMarker)

                    //....引用加载的UI....
                }
            );
        },
        searchByHand() {
            console.log("666");
            // this.poiPicker.searchByKeyword(this.searchKey)
        }
    }
};
</script>


<style lang="scss" scope>
.container {
    width: 100%;
    height: 100%;
    .search-box {
        margin-bottom: 15px;
    }
}
</style>