check-uniapp/pages/check/MapView.vue

<template>
	<view id="container" class=""></view>
</template>
<script>
	import "ol/ol.css";
	import gcoord from "gcoord";
	import Map from "ol/Map";
	import View from "ol/View";
	import TileLayer from "ol/layer/Tile";
	import OSM from 'ol/source/OSM';
	import XYZ from 'ol/source/XYZ'
	// const getUserInfo = () => {
	// 	apiUserInfo().then(res => {
	// 		console.log(res);
	// 		userinfo.value = res.data
	// 	})
	// }
	let map: any = null
	export default {
		name: "map-view",
		data() {
			return {
				maps: {}
			}
		},
		mounted() {
			// this.initAMap();
			this.createMap();
		},
		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('北京');
			},
			createMap() {
				var view = new View({
					// center: transform([103.23, 35.33], "EPSG:4326", "EPSG:3857"), //地图初始中心点
					center: gcoord.transform(
						[106.67591743605254, 38.21012898330025],
						gcoord.WGS84,
						gcoord.BD09
					), //地图初始中心点
					projection: "EPSG:4326",
					zoom: 4,
					minZoom: 1,
				});
				this.addMap("container", view);

			},
			addMap(target:any, view) {
				if (this.maps[target]) return;
				var gaodeMapLayer = new TileLayer({
					title: "高德地图",
					source: new XYZ({
						url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
						wrapX: false,
					}),
				});
				let map = new Map({
					//地图容器div的ID
					target,
					//地图容器中加载的图层
					layers: [gaodeMapLayer],
					//地图视图设置
					view, //同一个view
				});
				this.maps[target] = map;
				window.map = this.maps;
				console.log(window.map, "window.map");
			},
		},

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