Vue.js实现百度地图定位、搜索及获取经纬度

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uvN6vatvU44OQ0a9yuXdQZxTXODHGuLI"></script>

<template>
    <div>
        <FormItem label="活动地址：" prop="address">
            <Row style="margin-bottom: 10px;">
                <Col span="16"><div id="allmap"></div></Col>
                <Col span="8">
                    <div class="mapsearch">
                        <!-- 搜索框 -->
                        <Input v-model="mapsearch" placeholder="搜索">
                            <Button type="primary" @click="map()" slot="append" icon="ios-search"></Button>
                        </Input>
                        <!-- 搜索结果展示列表 -->
                        <div id="r-result"></div>
                    </div>
                </Col>
            </Row>
            <Row>
                <!-- 地址、经纬度 -->
                <Col span="16"><Input v-model="formData.address"><span slot="prepend">地址：</span></Input></Col>
                <Col span="4"><Input v-model="formData.lng" disabled><span slot="prepend">经度：</span></Input></Col>
                <Col span="4"><Input v-model="formData.lat" disabled><span slot="prepend">纬度：</span></Input></Col>
            </Row>
        </FormItem>
    </div>
</template>

map() {
    let t = this;
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(t.formData.lng, t.formData.lat);
    map.centerAndZoom(point, 18);
    var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);               // 将标注添加到地图中
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    // 添加带有定位的导航控件
    var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true
    });
    map.addControl(navigationControl);
    //获取定位
    /*var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            //alert('您的位置：'+r.point.lng+','+r.point.lat);
            t.$Notice.success({
                title: "您的位置："+r.point.lng+','+r.point.lat
            });
        } else {
            alert('failed'+this.getStatus());
        }
    },{enableHighAccuracy: true})*/

    //搜索
    var local = new BMap.LocalSearch(map, {
        renderOptions:{map: map, panel:"r-result"}
    });
    local.search(t.mapsearch);

    // 添加定位控件
    var geolocationControl = new BMap.GeolocationControl();
    geolocationControl.addEventListener("locationSuccess", function(e){
        // 定位成功事件
        var address = '';
        address += e.addressComponent.province;
        address += e.addressComponent.city;
        address += e.addressComponent.district;
        address += e.addressComponent.street;
        address += e.addressComponent.streetNumber;
        t.formData.address = address
        t.$Notice.success({
            title: "当前定位地址为：" + address
        });
    });
    geolocationControl.addEventListener("locationError",function(e){
        // 定位失败事件
        alert(e.message);
    });
    map.addControl(geolocationControl);

    //点击地图获取经纬度
    map.addEventListener("click", function(e){
        var myGeo = new BMap.Geocoder();
        myGeo.getLocation(new BMap.Point(e.point.lng, e.point.lat), function(res){
            let address = '';
            /*console.log(res)
            if(res.surroundingPois[0] != undefined){
                var title = res.surroundingPois[0].title ? res.surroundingPois[0].title : ''
                address = res.surroundingPois[0].address+title;
            } else{
                var title = res.title ? res.title : ''
                address = res.address+title;
            }*/
            var title = res.title ? res.title : ''
            t.formData.address = res.address+title;
        })

        // 经纬度
        t.formData.lng = e.point.lng;
        t.formData.lat = e.point.lat;
    });
}