高德地图封装弹窗获取当前位置以及pio提示查询点击地图打点

1 .按照高德地图的操作申请密钥跟安全key  

在piblic/index.html中写入如下

2 .安装高德api    npm  install  @amap/amap-jsapi-loader --save

3. 编写如下组件  替换成自己的key即可 

<template>
    <div>
        <el-dialog width="50%" :before-close="cancel" :closable="false" :mask-closable="false" :visible="visible"
            title="获取位置">
            <div>
                <div style="position: absolute;z-index: 6;">
                    <el-select v-model="keywords" filterable remote reserve-keyword placeholder="请输入关键词"
                        :remote-method="remoteMethod" :loading="loading" :clearable="true" size="mini"
                        @change="currentSelect" style="width: 500px">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" class="one-text">
                            <span style="float: left">{{ item.name }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{
                                item.district
                            }}</span>
                        </el-option>
                    </el-select>
                </div>
                <div id="gd-container" class="gaode-container" style="width: 100%;height: 500px;" v-if="visible"></div>
            </div>
            <el-form  :inline="true" label-width="150px" class="search-form" v-if="form.lat">
            <div class="search-box">
              <el-form-item label="您当前的纬度：" prop="measureBillCode">
                {{ form.lat }}
              </el-form-item>
              <el-form-item label="经度：" prop="measureBillCode">
               {{ form.lng }}
              </el-form-item>
              <el-form-item label="详细地址：" prop="createTime" class="select-date">
             {{ form.address }}
              </el-form-item>
           
            </div>
          </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
 
<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
    name: "gaode-dialog",
    data() {
        return {
            center: { lng: '', lat: '' },
            // 地图实例
            map: null,
            // 标记点
            marker: "",
            // 地址逆解析
            geoCoder: null,
            // 搜索提示
            AutoComplete: null,
            // 搜索关键字
            keywords: "",
            // 位置信息
            form: {
                lng: "",
                lat: "",
                address: "",
                adcode: "", //地区编码
            },
            // 搜索节流阀
            loading: false,
            // 搜索提示信息
            options: [],
        };
    },
    props: {
        visible: Boolean,
        value: {
            type: Boolean,
            default: false
        },
        mapHeight: {
            type: Number,
            default: 500
        }
    },
    watch: {
        visible: {
            deep: true,
            // immediate: true,
            handler(newVal, oldVal) {
                this.$nextTick(() => {
                    this.initMap()
                })
            },
        }
    },
    mounted() {
        this.initMap();
    },
    methods: {
        //传给地址以及经纬度
        confirm() {
             this.$emit('map-confirm', this.form.address, this.center)
        },
        //取消
        cancel() {
            this.$emit('cancel')
        },
        //初始地图
        initMap() {
            AMapLoader.load({
                // 你申请的Key
                key: "自己的key",
                version: "2.0",
                // 需要用到的插件
                plugins: ["AMap.Geocoder", "AMap.AutoComplete", "AMap.Geolocation"],
            })
                .then((AMap) => {
                    this.map = new AMap.Map("gd-container", {
                        viewMode: "3D", //是否为3D地图模式
                        zoom: 14, //初始化地图级别
                    });
                    this.getCurrentLocation()
                    //地址逆解析插件
                    this.geoCoder = new AMap.Geocoder({
                        city: "010", //城市设为北京，默认：“全国”
                        radius: 1000, //范围，默认：500
                    });
                    // 搜索提示插件
                    this.AutoComplete = new AMap.AutoComplete({ city: "全国" });
                    //点击获取经纬度;
                    this.map.on("click", (e) => {
                        // 获取经纬度
                        this.center.lng = e.lnglat.lng;
                        this.center.lat = e.lnglat.lat;
                        this.form.lng = e.lnglat.lng;
                        this.form.lat = e.lnglat.lat;
                        // 清除点
                        this.removeMarker();
                        // 标记点
                        this.setMapMarker();
                    });
                })
                // .catch((err) => {
                //     // 错误
                //     console.log(err);
                // });
        },
        //获取当前定位
        getCurrentLocation() {
            const that = this;
            that.geolocation = new AMap.Geolocation({
                timeout: 3000,          //超过3秒后停止定位，默认：5s
                enableHighAccuracy: true,
                zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
            });
            that.geolocation.getCurrentPosition(function (status, result) {
                //备注：getCurrentPosition方法会调用超时或失败：
                //Get geolocation time out：浏览器定位超时，包括原生的超时，可以适当增加超时属性的设定值以减少这一现象。
                //另外还有个别浏览器（如google Chrome浏览器等）本身的定位接口是黑洞，通过其请求定位完全没有回应，也会超时返回失败。
                //Get geolocation failed：定位失败，Chrome、火狐以及部分套壳浏览器接入的定位服务在国外，有较大限制，失败率高。
                console.log(status, result);
                if (status == 'complete') {
                    that.onComplete(result)
                } else {
                    that.onError(result) //失败后可使用getCityInfo获取非精准定位（具体到省市）
                }
            });
        },
        //解析定位结果
        onComplete(data) {
            console.log('定位结果：' + data.position) //经纬度信息
            let lnglat = data.position;
            let marker = new AMap.Marker({  //创建标记
                position: new AMap.LngLat(lnglat[0], lnglat[1])
            })
            this.map.clearMap()// 清除所有覆盖物（点标志）
            this.map.add(marker)// 添加点标志
            this.toGeoCoder()
        },
        //解析定位错误信息
        onError(data) {
            this.getLngLatLocation()
        },
        //在获取具体定位失败时调用的代码：（非精准定位！！！）
        getLngLatLocation() {
            const that = this;
            that.geolocation.getCityInfo(function (status, result) {
                if (status === 'complete') {
                    let data = result.position
                    that.address = result.province + result.city;
                    // that.showLocation(data)
                } else {
                    that.$message.error('获取地址失败')
                }
            })
        },
        showLocation(data) {
            let marker = new AMap.Marker({
                position: new AMap.LngLat(data[0], data[1]) //参数为经纬度
            })
            this.map.remove(this.marker);
            this.map.add(marker)// 添加点标志
            // this.showInfoWindow(marker);//自定义信息窗体
        },
        // 标记点
        setMapMarker() {
            // 自动适应显示想显示的范围区域
            this.map.setFitView();
            this.marker = new AMap.Marker({
                map: this.map,
                position: [this.form.lng, this.form.lat],
            });
            // 逆解析地址
            this.toGeoCoder();
            this.map.setFitView();
            this.map.add(this.marker);
        },
        // 清除点
        removeMarker() {
            if (this.marker) {
                this.map.remove(this.marker);
            }
        },
        // 逆解析地址
        toGeoCoder() {
            let lnglat = [this.form.lng, this.form.lat];
            this.geoCoder.getAddress(lnglat, (status, result) => {
                if (status === "complete" && result.regeocode) {
                    this.keywords = result.regeocode.formattedAddress;
                    this.form.address = result.regeocode.formattedAddress;
                }
            });
        },
        // 搜索
        remoteMethod(query) {
            console.log(query);
            if (query !== "") {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.AutoComplete.search(query, (status, result) => {

                        this.options = result.tips;
                    });
                }, 200);
            } else {
                this.options = [];
            }
        },
        // 选中提示
        currentSelect(val) {
            // 清空时不执行后面代码
            if (!val) {
                return;
            }
            this.form = {
                lng: val.location.lng,
                lat: val.location.lat,
                address: val.district + val.address,
                adcode: val.adcode,
            };
            // 清除点
            this.removeMarker();
            // 标记点
            this.setMapMarker();
        },
    },

};
</script>

4. 引入编写的组件 即可