uniapp引入谷歌地图

3,387 阅读1分钟

使用HB或者Vue-Cli都可以,然后直接把下面的代码复制进去就好了。记得科学上网

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			initMap() {
				console.log("地图初始化完成")
			}
		}
	}
</script>

<script module="renderScript" lang="renderjs">
	export default {
		data() {
			return {
				map: {}
			};
		},
		mounted() {
			const _this = this
			var script = document.createElement("script");
			script.src =
				"https://maps.googleapis.com/maps/api/js?key=你的key&callback=initMap";
			script.async = true;
			window.initMap = function() {
				_this.map = new google.maps.Map(document.getElementById("map"), {
					center: {
						lat: -34.397,
						lng: 150.644
					},
					zoom: 8,
				});
				_this.$ownerInstance.callMethod('initMap')
				_this.handleMap()
			};
			document.head.appendChild(script);
		},
		methods: {
			handleMap() {
				console.log("当前的地图对象", this.map)
			}
		},
	};
</script>