摘要

Vue 2.0 使用高德地图

Vue 2.0 使用高德地图

注册

1.高德地图官网 (opens new window)

2.高德地图 api 文档 (opens new window)

成为开发者

1.登录成为开发者 (opens new window)，完成注册。 2.获取 key 值 点击控制台 (opens new window)，在控制台获取 key 值。 3.创建我的应用 在控制台-[应用管理]-[我的应用]创建应用，并获取 key 值。

安装

npm install amap-js-api-loader --save

引入

import AMapLoader from 'amap-js-api-loader';

实例代码(提供借鉴)

Html 代码

<template>
    <div class="box">
        <div>
            <div class="selectStyle">
                <el-select v-model="keywords" id="select" value-key="id" style="width: 100%;" filterable remote reserve-keyword
                    placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading" :clearable="true"
                    @change="currentSelect">
                    <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="container" class="container"></div>
        </div>
        <div class="info-box">
            <div class="item">
                <div class="item-label">详细地址：</div>
                <div class="item-value">{{ form.address }}</div>
            </div>
            <div class="item">
                <div class="item-label">纬度：</div>
                <div class="item-value">{{ form.lat }}</div>
            </div>
            <div class="item">
                <div class="item-label">经度：</div>
                <div class="item-value">{{ form.lng }}</div>
            </div>
            <!-- <div class="item">
                <div class="item-label">区号:</div>
                <div class="item-value">{{ form.adcode }}</div>
            </div> -->
        </div>
    </div>
</template>

javascript 代码

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

export default {
    name: "TestIndex",
    props: {
        addressForm: {
            type: Object,
            default: () => {
                return {}
            }
        }, // 父组件提供的值方便回显addressForm: {lng: null,lat: null,address: "",},
        gaodeApi: {
            type: Object,
            default: () => {
                return {}
            }
        } //为mapkey配置对象 gaodeApi:{key: '高德Key',safeKey: '安全密钥'}

    },
    data() {
        return {
            // 地图实例
            map: null,
            // 标记点
            marker: "",
            // 地址逆解析
            geoCoder: null,
            // 搜索提示
            AutoComplete: null,
            // 搜索关键字
            keywords: "",
            // 位置信息
            form: {
                lng: "",
                lat: "",
                address: "",
                adcode: "", //地区编码
            },
            // 搜索节流阀
            loading: false,
            // 搜索提示信息
            options: [],
            center: [114.298572, 30.584355]
        };
    },
    created() {

    },
    methods: {
        initMap() {
            AMapLoader.load({
                // 你申请的Key
                key: this.gaodeApi.key ? this.gaodeApi.key : "",
                version: "2.0",
                // 需要用到的插件
                plugins: ["AMap.Geocoder", "AMap.AutoComplete", 'AMap.ToolBar', 'AMap.Geolocation'],
            })
                .then((AMap) => {
                    this.map = new AMap.Map("container", {
                        viewMode: "3D", //是否为3D地图模式
                        zoom: 10, //初始化地图级别
                        center: this.center, //初始化地图中心点位置
                    });
                    this.map.addControl(new AMap.ToolBar({
                        // 简易缩放模式，默认为 false
                        liteStyle: true,
                        // 停靠位置，默认左下角
                        position: 'RT',
                        // 停靠时偏移量，默认 0
                        buttonOffset: new AMap.Pixel(10, 20)
                    }))
                    // 用来获取和展示用户主机所在的经纬度位置
                    this.map.addControl(new AMap.Geolocation({
                        // 停靠位置，默认左下角
                        position: 'RB',
                        // 停靠时偏移量，默认 0
                        buttonOffset: new AMap.Pixel(10, 20)
                    }));
                    //地址逆解析插件
                    this.geoCoder = new AMap.Geocoder({
                        city: "010", //城市设为北京，默认：“全国”
                        radius: 1000, //范围，默认：500
                    });

                    // 搜索提示插件
                    this.AutoComplete = new AMap.AutoComplete({ city: "全国" });
                    //点击获取经纬度;
                    this.map.on("click", (e) => {
                        // 获取经纬度
                        this.form.lng = e.lnglat.lng;
                        this.form.lat = e.lnglat.lat;
                        // 清除点
                        this.removeMarker();
                        // 标记点
                        this.setMapMarker();
                    });
                    if (this.addressForm.lng && this.addressForm.lat) {
                        this.form.lng = this.addressForm.lng
                        this.form.lat = this.addressForm.lat
                        this.form.address = this.addressForm.address
                        // 清除点
                        this.removeMarker();
                        // 标记点
                        this.setMapMarker();
                    }
                })
                .catch((err) => {
                    // 错误
                    console.log(err);
                });
        },
        // 标记点
        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) => {
                console.log(result);
                if (status === "complete" && result.regeocode) {
                    this.form.address = result.regeocode.formattedAddress;
                }
            });
            this.$emit('getAddressForm',this.form)
        },
        // 搜索
        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;
            }
            console.log(val);
            this.form = {
                lng: val.location.lng,
                lat: val.location.lat,
                address: val.district + val.address,
                adcode: val.adcode,
            };
            // 清除点
            this.removeMarker();
            // 标记点
            this.setMapMarker();
        },
        getFocus() {

            setTimeout(() => {
                try {
                    document.getElementById("select").focus();
                } catch (e) { }
            }, 200); // 设置延时0.2秒

        },
    },
    async mounted() {

        window._AMapSecurityConfig = {
            // 安全密钥
            securityJsCode: this.gaodeApi.safeKey ? this.gaodeApi.safeKey : "",
        };
        await this.initMap();
        await this.getFocus();

    },
};
</script>

CSS 代码

<style lang="scss" scoped>
.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .info-box {
        margin-top: 16px;
        width: 600px;
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px dashed #ccc;
        padding: 10px;

        .item {
            margin-bottom: 16px;

            .item-label {
                color: #000;
                margin-bottom: 10px;
            }

            .item-value {
                background-color: #F5F7FA;
                border: 1px solid #dfe4ed;
                border-radius: 4px;
                color: #999;
                height: 30px;
                line-height: 30px;
                padding: 0 15px;
            }
        }
    }
}
.selectStyle{
    width: 600px;
}
.container {
    width: 600px;
    height: 300px;
    border: 1px solid #ccc;
}
</style>

具体演示地址请参看在线演示 (opens new window)