VUE 实现google 地图展示，搜索，获取经纬度

安装Google 依赖 npm i @googlemaps/js-api-loader

  <template>
  <q-dialog maximized v-model="showDialog" flat  ref="mapdialog">
  <q-form  @submit="mapsave" ref="popform" class="dialog_card column">
    <h5 class="view_title justify-between q-px-md">
        {{maptype}}
      <q-btn dense icon="close" v-close-popup />
    </h5>
    <q-scroll-area class="col row">
        <div class="row dialog_form padding20-l">
            <table
                class="cross_table advance-tab"
                boreder="0"
                cellpadding="0"
                cellspacing="2"
                >
                <tbody>
                    <tr>
                    <td class="">
                        <h5 class="q-text-als">
                        {{ $t("depart.Address") }}:
                        </h5>
                    </td>
                    <td class="wtex">
                        <q-input
                        class="q-inputw"
                        outlined
                        dense
                        v-model="mapaddess"
                        type="text"
                        />
                    </td>
                
                    <td class="">
                    <q-btn
                        class="q-mx-sm btn_search_ls"
                        color="primary"
                        :label="$t('depart.Search')"
                        @click="mapsearch"
                    />
                    </td>
                    <td class="wtex">
                        
                    </td>

                    <td class="">
                
                    </td>
                    <td class="wtex">
                    
                    </td>
                    </tr>

                
                </tbody>

                </table>
            </div>



            <div id="map" style="width: 100%; height: 800px;"></div>
    </q-scroll-area>
   
    <div class="row justify-end q-pa-md q-bordertop">
       <div class="on-left" style="width:100%;" > {{this.$t("depart.latitude")}}:{{savelat}}   {{this.$t("depart.longitude")}}:{{savelng}}</div>
       <q-btn
        class="q-mx-sm btn_search_ls"
        color="primary"
        :label="$t('depart.commitBtn')"
        type="submit"
      />

      <q-btn
        outline
        class="btn_normal_als"
        color="primary"
        :label="$t('depart.closeBtn')"
        v-close-popup
      />
    </div>
  </q-form>
</q-dialog>
  </template>



   <script>
  import { Loader } from "@googlemaps/js-api-loader";

const loader = new Loader({
  apiKey: "xxxxxxxxxxxxxxxx",
  version: "weekly",
});

	
	let map;
	let marker;
	let defaultLatLng = { lat: 13.876016, lng: 100.576993 };
	let geocoder;
	
	export default {
	  name: "googlemap",
	  components: {
	
	  },
	  data() {
	    return {
	        maptype:"Map",
	        showDialog: false,
	        mapaddess:"",
	        center:{lat:13.876016, lng:100.576993},
	        savelat:13.876016,
	        savelng:100.576993,
	    };
	  },
	  methods:{
	    show() {
	      this.showDialog = true;
	      this.mapaddess="";
	      this.initMap();
	    },
	    hide() {
	      this.showDialog = false;
	    },
	    initMap() {
			  loader
			    .load()
			    .then((google) => {
						// 缩放视野以包含所有给定的坐标点
			      map = new google.maps.Map(document.getElementById("map"),
			        {
								// 地图打开时的中心点位，经纬度是数字Number类型的
			          center: this.center,
								// 地图缩放参数
			          zoom: 17,
								// 最大缩放参数
			        	maxZoom: 18,
								// 最小缩放参数
			        	minZoom: 4,
								// 禁用默认UI
			          disableDefaultUI: true
			        }
			      )
	
	          marker = new google.maps.Marker({
	            map: map,
	            position: defaultLatLng,
	            draggable: true
	          });
	          map.setCenter(marker.getPosition());
	
	
	          //移动标记点获取经纬度
	          google.maps.event.addListener(marker,'dragend',this.getAreaName);
	
	
	          //地址搜索初始化
						geocoder=new google.maps.Geocoder();
			    })
			    .catch((e) => {
			      console.log(e)
			    })
			},
	    getAreaName(result){
	      this.savelat=result.latLng.lat();
	      this.savelng=result.latLng.lng();
	
	      //console.log(result);
	    },
	    //地图搜索
	    mapsearch(){
	      geocoder.geocode({ 'address': this.mapaddess }, this.GetMapLocation);
	
	    },
	
	    GetMapLocation(results, status){
	        if (status === 'OK') {
	            map.setCenter(results[0].geometry.location);
	            marker.setPosition(results[0].geometry.location);
	
	            this.savelat= results[0].geometry.location.lat();
	            this.savelng= results[0].geometry.location.lng();
	        } else {
	          console.log("error");
	        }
	    },
	    //地图保存
	    mapsave(){
	      var p = marker.getPosition();
	      this.savelat=p.lat();
	      this.savelng=p.lng();
	      this.$emit('mapsave',this.savelng,this.savelat);
	    },
	
	
	  },
	
	 
	};
	</script>

可以根据地点搜索定位到指定的位置， 移动图标可以获取经纬度。