百度地图示例

<template>
<div class="SPecial">
    <el-form :model="form" ref="form" label-position="left" label-width="100px">
        <el-form-item label="城市：">
            <region-picker  two-select style="float:left" :province.sync="form.province" :city.sync="form.city" @onchange="changeaddress">
            </region-picker>
        </el-form-item>
    </el-form>
    <div id="map" style="width:100%;height:40rem;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
</div>
</template>


<script>
export default {
    data() {
        return {
            form: {
                province: '浙江省',
                city: '杭州市',
            },
            map: null,
            myDis: null,
        }
    },
    created(){
        this.initform = { ...this.form } //created只执行一次（在第一次进入该页面时），此时将this.form的值赋给initform。
        //注意：initform并未定义在data中(也可以定义在data中，只是无需定义在data中。定义在data中的变量是响应式的，会消耗更多的性能)，this指向当前vue组件，所以initform应该是定义在vue组件上
    },
    activated() {

        this.initMap()
        this.form = { ...this.initform } //使默认定位任为浙江杭州
    },
    methods: {
        changeaddress(e) {
            this.form.province = e.province;
            this.form.city = e.city;

            //直辖市
            if (e.province == '北京市' || e.province == '天津市' || e.province == '上海市' || e.province == '台湾省') {
                this.map.centerAndZoom(e.province, 13.3) //‘省’改变时即更新地图中心坐标
            } else {
                this.map.centerAndZoom(e.city, 13.3) //‘市’改变时即更新地图坐标
            }
        },
        initMap() {
            // 百度地图API功能  
            var that = this
            
            //div的id="map"
            that.map = new BMap.Map('map');
            var poi = new BMap.Point(120.202799, 30.301264);
            that.map.centerAndZoom(poi, 13.3); //设置地图的中心点
            that.map.enableScrollWheelZoom(); //允许滚轮缩放
            that.map.addControl(new BMap.NavigationControl());
            that.myDis = new BMapLib.DistanceTool(that.map, {
                lineColor: 'red',
                lineStroke: 2,
            })
        },
    }
}
</script>