前言：

       vue-cli3/4中引入高德地图实现我们的定位效果，也可动态改变值。

效果图：

实现步骤：

步骤一：申请高德的key

步骤二：在public/index.html里面添加

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script>

步骤三：在页面上引入这个组件

 

官网地址与api地址：

官网地址

api地址

 

组件源码：放到项目中可直接看到上面的效果

<template>
    <div class="mapDiv">
        <p>当前位置信息：{{positionText}}</p>
        <hr/>

        <div class="search">
                <span class="city">
                  北京
                  <i class="iconfont iconicon"></i>
                </span>
            <i class="iconfont iconxingtaiduICON_sousuo--"></i>
            <input type="text" v-model="searchVal" @input="getLocation" placeholder="请输入地址">
        </div>
        <ul class="area_list"
            v-for="(item,index) in tips"
            :key="item.id+index"
            @click="postAddRess(item)">
            <li>
                <h4>{{item.district}}</h4>
                <p>{{item.name+item.address}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: [],
        watch: {},
        data() {
            return {
                name: "",
                positionText:'',//当前所在位置
                tips:[],//搜索框搜索的地址
                searchVal:'',//搜索框值
            }
        },
        created() {
            this.initGetP();
        },
        mounted() {
        },
        methods: {
            /*
            * 初始化获取你当前的坐标位置
            * */
            initGetP(){
                let _this = this;
                AMap.plugin('AMap.Geolocation', function() {
                    var geolocation = new AMap.Geolocation({
                        // 是否使用高精度定位，默认：true
                        enableHighAccuracy: true,
                        // 设置定位超时时间，默认：无穷大
                        timeout: 10000,
                        // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                        buttonOffset: new AMap.Pixel(10, 20),
                        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                        zoomToAccuracy: true,
                        //  定位按钮的排放位置,  RB表示右下
                        buttonPosition: 'RB'
                    })

                    geolocation.getCurrentPosition()
                    AMap.event.addListener(geolocation, 'complete', onComplete)
                    AMap.event.addListener(geolocation, 'error', onError)

                    function onComplete (data) {
                        // data是具体的定位信息
                        console.log(data);
                        _this.positionText = data.formattedAddress
                    }

                    function onError (data) {
                        // 定位出错
                    }
                })
            },
            /**
             * 搜索框搜索城市
             * */
            getLocation(){
                let val = this.searchVal;
                let _this = this;
                AMap.plugin('AMap.Autocomplete', function(){
                    // 实例化Autocomplete
                    var autoOptions = {
                        //city 限定城市，默认全国
                        city: '全国'
                    }
                    var autoComplete= new AMap.Autocomplete(autoOptions);
                    autoComplete.search(val  , function(status, result) {
                        // 搜索成功时，result即是对应的匹配数据
                        _this.tips = result.tips;//拿到搜索的数据回填到页面
                    })
                })
            },
            /**
             * 点击搜索框回填数据
             * */
            postAddRess(data){
                let str = data.district+data.address;
                this.positionText = str;
            }


        },
        components: {},
        beforeDestroy() {
        }

    }
</script>

<style scoped>
    .mapDiv{
        border:1px solid red;
        padding:30px 10px;
    }
</style>