zx_flk_app/component/googleMap/googleMaps.vue

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

<script>
	import { Loader } from "@googlemaps/js-api-loader"
	export default {
		props:{
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '100%'
			},
			myLocations:{
				type:Object,
				default:{}
			}
		},
		data() {
			return {
				maps: null,
				loader:null
			}
		},
		mounted() {
			// https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap
			const script = document.createElement('script')
			script.src =
				'https://maps.googleapis.com/maps/api/js?key=AIzaSyCWxFJPWgJP8hb2cTbvfZb13tbm2rlhxgs&callback=initMap&v=weekly&loading=async';
			script.async = true; // 异步加载
			script.defer = true; // 延迟执行
			document.head.appendChild(script)
			window.initMap = function() {
				console.log('啦啦啦啦')
			};
			// let loader = new Loader({
			// 	apiKey: "AIzaSyCWxFJPWgJP8hb2cTbvfZb13tbm2rlhxgs",
			// 	version: "weekly",
			// });
			// this.init(loader)
		},
		methods: {
			async init(loader) {
				loader.load().then(async res => {
					console.log(res)
					const {
						Map
					} = await google.maps.importLibrary("maps");

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

<style>

</style>