|
@@ -0,0 +1,68 @@
|
|
|
+<template>
|
|
|
+ <div class="map">
|
|
|
+ <div id="amap" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { onMounted } from "vue";
|
|
|
+import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
+
|
|
|
+let AMap = null;
|
|
|
+let map = null;
|
|
|
+let imageLayer = null;
|
|
|
+
|
|
|
+const initMap = async () => {
|
|
|
+ const _AMap = await AMapLoader.load({
|
|
|
+ key: "3283c863f6f35814f1a6219cdd69cb6e",
|
|
|
+ version: "2.0",
|
|
|
+ plugins: ["AMap.MoveAnimation", "AMap.ImageLayer", "AMap.TileLayer"],
|
|
|
+ });
|
|
|
+ AMap = _AMap;
|
|
|
+
|
|
|
+ addImageLayer();
|
|
|
+ const layer = new AMap.createDefaultLayer({
|
|
|
+ visible: true, // 是否可见
|
|
|
+ opacity: 1, // 透明度
|
|
|
+ zIndex: 0, // 叠加层级
|
|
|
+ });
|
|
|
+
|
|
|
+ map = new AMap.Map("amap", {
|
|
|
+ viewMode: "2D",
|
|
|
+ zoom: 14, // 地图显示的缩放级别
|
|
|
+ zooms: [10, 18],
|
|
|
+ center: [106.837106, 29.712762],
|
|
|
+ resizeEnable: true, // 是否监控地图容器尺寸变化
|
|
|
+ layers: [layer, imageLayer],
|
|
|
+ });
|
|
|
+
|
|
|
+ map.on("zoomchange", () => {
|
|
|
+ console.log("当前缩放级别:", map.getZoom());
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const addImageLayer = () => {
|
|
|
+ imageLayer = new AMap.ImageLayer({
|
|
|
+ bounds: new AMap.Bounds(
|
|
|
+ [106.837106, 29.712762], // 左下 手绘图左下相对于地图的经纬度
|
|
|
+ [106.848727, 29.720554] // 右上 手绘图右上相对于地图的经纬度
|
|
|
+ ),
|
|
|
+ // url为手绘图地址
|
|
|
+ url: "https://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg",
|
|
|
+ zIndex: 100,
|
|
|
+ zooms: [14, 20], // 设置可见级别,[最小级别,最大级别]
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ initMap();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.map {
|
|
|
+ #amap {
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|