[JavaScript知识库]高德地图通过script标签引入到vue

高德地图script标签引入到vue

<template>
	<div id="subwayContent" style="width:100%;height:100%"></div>
</template>

<script>

export default {
	data() {
		return {
		}
	},
	components: {},
	created() {
	},
	mounted() {
		const oScript = document.createElement('script');
		oScript.type = 'text/javascript';
		oScript.src = '//webapi.amap.com/maps?v=1.4.15&key=自己的key';
		document.body.appendChild(oScript);
		this.init()
	},
	methods: {
		init() {
			var test2 = setInterval(() => {
				console.log(111)
				try {
					this.map = new AMap.Map('subwayContent', {
						resizeEnable: true,
						rotateEnable: true,
						pitchEnable: true,
						showLabel: true, // 是否显示地图文字标记
						zoom: 11,
						pitch: 60, // 视角
						rotation: -15,
						viewMode: '3D', // 开启3D视图,默认为关闭
						// buildingAnimation: true, // 楼块出现是否带动画
						cursor: 'hand', // 鼠标在地图上的表现形式
						expandZoomRange: true,
						zooms: [3, 20],
						skyColor: '#132237', // 天空的颜色
						// layers: [
						//   new AMap.TileLayer.RoadNet({
						//     rejectMapMask: false
						//   })
						// ],
						// center: [113.289243, 23.23746] // 地图中心点设置
					})
					clearInterval(test2)
				} catch (error) {
					console.log(error)
				}
			}, 10)
		}
	}
}
</script>

<style lang="scss" scoped>
</style>