vue引入百度地图 搜索定位

1. bmpgl.js

export function BMPGL(ak) {
    return new Promise(function(resolve, reject) {
      window.init = function() {
        // eslint-disable-next-line
        resolve(BMapGL)
      }
      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = `http://api.map.baidu.com/api?v=3.0&type=webgl&ak=${ak}&callback=init`
      script.onerror = reject
      document.head.appendChild(script)
    })
  }

2. demo.vue

<template>
	<div class="fizc">
		<div class="inputleft">活动地点</div>
		<input type="text" placeholder="请输入活动地点" v-model="address.address" id="suggestId" class="inpute">
		<input type="text" id="itude"  v-model="address.itude" v-show="false">
	</div>
	<div>
		<div class="baidu" ref="mapRef" id="baidumap"></div>
	</div>
</template>


<script>
import { BMPGL } from "@/utils/bmpgl.js";
export default ({
    data(){
        return{
            address:{
                address:"",
                itude:"",//经纬度
            },
            map:{},
            mapZoom: 15,
            ak: "ySm72UG7u*********516jToN", // 百度的地图密钥AK,需要加IP或域名的白名单
        }
    },

    methods:{
        initMap(){
			var _this = this
            _this.map = null

            BMPGL(this.ak).then((BMapGL) => {
                _this.map = new BMapGL.Map("baidumap");
                var ac = new BMapGL.Autocomplete(    //建立一个自动完成的对象
                    {"input" : "suggestId","location" : _this.map});
                var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
                _this.map.addControl(zoomCtrl);
                var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
                _this.map.addControl(cityCtrl);
                var LocationControl= new BMapGL.LocationControl();  // 添加定位控件，用于获取定位
                _this.map.addControl(LocationControl);
                var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
                _this.map.addControl(scaleCtrl);
                _this.map.setMapType(); // 设置地图类型为标准地图模式；
                var localcity = new BMapGL.LocalCity();
                localcity.get(e => {
                    _this.map.centerAndZoom(e.name, _this.mapZoom);
                })

                let point
                var lng = "",lat = ""

                //初始化的时候如果有经纬度，需要先在地图上添加点标记
                if(_this.address.itude){
                    var lnglat = _this.address.itude
                    var lnglat_arr = lnglat.split(',')

                    lng = lnglat_arr[0]
                    lat = lnglat_arr[1]

                    point = new BMapGL.Point(lng, lat)
                    _this.map.centerAndZoom(point, _this.mapZoom)

                    var marker2 = new BMapGL.Marker(point);
                    //在地图上添加点标记
                    _this.map.addOverlay(marker2);
                }

                _this.map.enableScrollWheelZoom(true)
                _this.map.setHeading(64.5)
                _this.map.setTilt(73)

                //点击下拉框的值
                _this.map.addEventListener('click', function (e) {
                    _this.map.clearOverlays();
                    var point1 = new BMapGL.Point(e.latlng.lng, e.latlng.lat)
                    // 创建点标记
                    var marker1 = new BMapGL.Marker(point1);
                    // 在地图上添加点标记
                    _this.map.addOverlay(marker1);
                    _this.address.itude = e.latlng.lng+','+e.latlng.lat

                });


                ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
                    var _value = e.item.value;

                    _this.address.address = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    // 搜索
                    _this.map.clearOverlays();    //清除地图上所有覆盖物
                    //智能搜索
                    var local = new BMapGL.LocalSearch(_this.map, {
                        onSearchComplete: ()=>{
                            //获取第一个智能搜索的结果
                            const pp = local.getResults().getPoi(0).point;
                            _this.map.centerAndZoom(pp, _this.mapZoom);
                            _this.map.addOverlay(new BMapGL.Marker(pp));    //添加标注
                            _this.address.itude = pp.lng+','+pp.lat
                        }
                    });
                    local.search(_this.address.address);
                });

            }).catch((err) => {
                console.log(err)
            })

        },

    },
    mounted(){
        this.initMap()
    },

})
</script>

<style>
.tangram-suggestion {
    z-index: 10000;
}
</style>
<style scoped lang="scss">
#baidumap{
    width: 100%;
    height: 400px;
}
:deep()
.BMap_cpyCtrl {
    display: none!important;
}
</style>