vue项目中根据地址在百度地图上定位显示标注信息

需求：后端返回的地址，点击图标在地图上显示，并且有位置标注。

这里后端只返回了地址，获取经纬度需要自己处理。

 

 

 

<div class="bg_first">
      <div class="map" id="allmap"></div> 
</div>

　　

export default {
    data() {
        return {
            baseinfo: {
                address: '北京中关村南大街12号',
                // address: '上海浦东新区浦东南路3993号',

            },
           // 百度地图参数
            BMap: {},
            map: {},
            location: {
                lng: 116.40400,
                lat: 39.92800 
            },
            keyword: '',
            myGeo: '',
            map: '',
        } 
    },
    created() {
        this.$nextTick(() => {
             this.shaowMap();
        })
    },
    methods: {
        handleSeat(item) {
            this.keyword = item;
            this.getPointByAddress(item).then(res => {
                console.log('8.28', res)
                this.shaowMap(res);
            });
        },
        //根据地名获取经纬度
        getPointByAddress(address) {
            const myGeo = new BMap.Geocoder();
            return new Promise((resolve, reject) => {
                myGeo.getPoint(address, (point) => {
                    //对地址进行地理编码,编码成功，则返回经纬度坐标对象
                    if (point) {
                        this.location.lng = point.lng;
                        this.location.lat = point.lat;
                        console.log('打印一下', this.location)
                        resolve(point);
                    } else {
                        reject('地理编码失败');
                    }
                })
            }, '全国')
        },
        shaowMap (res) {
            console.log(res)
            /* global BMap */
            this.map = new BMap.Map('allmap') // 创建Map实例
            this.map.centerAndZoom(new BMap.Point(res.lng, res.lat), 10)
            this.map.enableScrollWheelZoom(true)
            this.myGeo = new BMap.Geocoder()
            this.geocodeSearch(this.keyword)
        },
        geocodeSearch (add) {
            let that = this;
            that.myGeo.getPoint(add, function (point) {
                if (point) {
                    console.log('point', point)
                    var marker = new BMap.Marker(point)
                    that.map.addOverlay(marker)
                    var opts = {
                        position: point, // 指定文本标注所在的地理位置
                        offset: new BMap.Size(1, -50) // 设置文本偏移量
                    }
                    var label = new BMap.Label(add, opts) // 创建文本标注对象
                    label.setStyle({
                        color: 'red',
                        fontSize: '15px',
                        height: '20px',
                        lineHeight: '20px',
                        border: 'none'
                    })
                    that.map.addOverlay(label)
                  
                } else {
                    console.log('您选择地址没有解析到结果!')
                }
            }, '北京市')
        }
    }
}