谷歌地图配合element的弹框,Dialog 对话框使用

在打开对话框的时候获取当前地址的经纬度

       this.$nextTick(() => {
          if(this.stationId||(this.stationForm.latitude&&this.stationForm.longitude)){//判断修改地图上的点使用
            this.center = {lat: Number(this.stationForm.latitude), lng: Number(this.stationForm.longitude)};
            this.initMap(this.center)

          }else{
            if (navigator.geolocation) {//自带的定位,获取经纬度,google必须传入经纬度(我认为的,不传报错,可能有别的方法,我没找到)
              navigator.geolocation.getCurrentPosition((position)=>{
                console.log(position.coords)
                this.stationForm.longitude = position.coords.longitude
                this.stationForm.latitude = position.coords.latitude
                this.center = {lat: Number(this.stationForm.latitude), lng: Number(this.stationForm.longitude)};//经纬度格式
                this.initAutocomplete()
              },(error)=>{
                console.log(error)
              });
            } else {
              console.log("请求失败")
              this.center = {lat: 0, lng: 0};//经纬度格式
              this.initAutocomplete()
            }
          }
        });

拿到经纬度之后生成谷歌地图

initAutocomplete() {
        let _this = this
        var map = new google.maps.Map(document.getElementById('map'), {//生成地图
          center: _this.center,//经纬度
          zoom: 13,//放大缩小的层级
          disableDefaultUI:true,//谷歌地图自带的插件,false开启好像
        });
        var input = document.getElementById('tipinput');//选择一个input,
        console.log(google.maps.places)
        var searchBox = new google.maps.places.SearchBox(input);//input和地图搜索
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        map.addListener('bounds_changed', function() {
          
          searchBox.setBounds(map.getBounds());
          console.log(document.querySelector('.pac-container'))
          if(document.querySelector('.pac-container')){
            document.querySelector('.pac-container').style['z-index'] = 99999//给搜索的下拉结果z-index,不然不出现,会被盖在下面
          }
          
        });

        var markers = [];
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.
        searchBox.addListener('places_changed', function() {
          
          var places = searchBox.getPlaces();

          if (places.length == 0) {
            return;
          }

          // Clear out the old markers.
          markers.forEach(function(marker) {
            marker.setMap(null);
          });
          markers = [];

          // For each place, get the icon, name and location.
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            console.log(place)
            console.log(place.geometry)
            console.log(place.geometry.location.lng())
            console.log(place.geometry.location.lat())
            _this.stationForm.lng = Number(place.geometry.location.lng())
            _this.stationForm.lat = Number(place.geometry.location.lat())
            _this.center = {lat: Number(place.geometry.location.lat()), lng: Number(place.geometry.location.lng())};
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }
            // var icon = {  //这是设置标记点的大小样式,等等
            //   url: 'http://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png',
            //   size: new google.maps.Size(21, 43),
            //   origin: new google.maps.Point(0, 0),
            //   anchor: new google.maps.Point(17, 34),
            //   scaledSize: new google.maps.Size(25, 25)
            // };

            // Create a marker for each place.
            markers.push(new google.maps.Marker({//添加标记点
              map: map,
              // icon: icon,
              title: place.name,
              position: place.geometry.location
            }));
            let marker = markers[0]
            marker.setDraggable(true)
            //添加拖动监听事件
            google.maps.event.addListener(marker, 'dragend', function(){
                _this.showAddress(map, marker);
            });
            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
        });
      },
showAddress(map, marker){//拖动事件触发
        console.log(marker)
        let _this = this
        var latlng = {lat: Number(marker.internalPosition.lat()), lng: Number(marker.internalPosition.lng())};
        // var latlng = marker.internalPosition
        console.log(latlng)
        let geocoder = new google.maps.Geocoder();

        //根据经纬度获取地址信息
        geocoder.geocode({'latLng': latlng}, function(results, status) {
          console.log(results, status)
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
              _this.stationForm.lng = Number(results[0].geometry.location.lng())
              _this.stationForm.lat = Number(results[0].geometry.location.lat())
            }
          } else {
              alert("Geocoder failed due to: " + status);
          }
        });
      },

搜索基本完成,但是有可能关闭Dialog 对话框保存后,再次修改

initMap(center){
        let _this = this
        var map = new google.maps.Map(document.getElementById('map'), {//生成地图
          center: center,
          zoom: 13,
          disableDefaultUI:true,
        });
        let marker = new google.maps.Marker({//生成标记点
          map: map,
          // icon: icon,
          // title: place.name,
          position: center,
        });
        marker.setDraggable(true)
        //添加拖动监听事件
        google.maps.event.addListener(marker, 'dragend', function(){
            _this.showAddress(map, marker);
        });
      },