zx_flk_app/component/googleMap/googleMaps.vue

<template>
	<view :style="{width:width,height:height}">
		<view :style="{width:width,height:height}" id='map111'></view>
	</view>
</template>

<script>
	import { Loader } from "@googlemaps/js-api-loader"
	export default {
		props:{
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '100%'
			},
		},
		data() {
			return {
				maps: null,
				loader:null
			}
		},
		mounted() {
			console.log('哈哈哈')
			let loader = new Loader({
				apiKey: "AIzaSyCWxFJPWgJP8hb2cTbvfZb13tbm2rlhxgs",
				version: "weekly",
			});
			this.init(loader)
		},
		methods: {
			async init(loader) {
				loader.load().then(async res => {
					const {
						Map
					} = await google.maps.importLibrary("maps");

					this.map = new Map(document.getElementById("map111"), {
						center: {
							lat: -34.397,
							lng: 150.644
						},
						zoom: 8,
					});
				}).catch(err=>{
					console.log(err)
				});
			}
		}
	}
</script>

<style>

</style>