check-uniapp/pages/index/index.vue

<template>
	<view id="container" class=""></view>

</template>
<script>
	import 'ol/ol.css';
	import {
		Map,
		View
	} from 'ol';
	import TileLayer from 'ol/layer/Tile';
	import OSM from 'ol/source/OSM';
	const getUserInfo = () => {
		apiUserInfo().then(res => {
			console.log(res);
			userinfo.value = res.data
		})
	}
	let map: any = null
	export default {
		name: "map-view",
		data() {
			return {

			}
		},
		mounted() {
			this.initAMap();
			// this.initMap();
		},
		unmounted() {
			map && map.destroy();
		},
		methods: {
			initAMap() {
				map = new AMap.Map("container", {
					viewMode: "3D", // 是否为3D地图模式
					zoom: 11,
					center: [116.397428, 39.90923],
				});
				// 设置离线地图
				map.setPlugins({
					'AMap.Offline': {}
				});
				// 添加离线地图数据
				map.offline.setCity('北京');
			},
			initMap() {
				// 创建地图实例
				map = new Map({
					target: 'container',
					layers: [
						new TileLayer({
							source: new OSM()
						})
					],
					view: new View({
						center: [0, 0], // 地图中心点坐标
						zoom: 2 // 缩放级别
					})
				});
			}
		},

	};
</script>
<style scoped>
	#container {
		width: 100%;
		height: 100vh;
	}
</style>