vue3中dialog弹窗中使用高德地图

最新推荐文章于 2024-10-22 15:47:18 发布

原创最新推荐文章于 2024-10-22 15:47:18 发布 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍如何安装并封装AMap地图组件，通过npm安装amap-jsapi-loader，然后在Vue项目中创建并使用地图组件，实现地理定位等功能。

第一步
安装amap-jsapi-loader

npm i @amap/amap-jsapi-loader --save
// 官方文档中加了-dev字段，加了-dev字段就只能在本地的时候使用，部署到服务器后将不引入包

第二步
封装地图组件map.vue

<template>
  <div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef } from "@vue/reactivity";
import { watchEffect } from "vue";
export default {
  name: "mapcomtaint",
  props: {
    positionFlag: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    const map = shallowRef(null);
    watchEffect(() => {
      if (props.positionFlag) {
        AMap.plugin("AMap.Geolocation", function () {
          var geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 10000,
            // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
            buttonOffset: new AMap.Pixel(10, 20),
            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            zoomToAccuracy: true,
            //  定位按钮的排放位置,  RB表示右下
            buttonPosition: "RB",
          });

          geolocation.getCurrentPosition(function (status, result) {
            if (status == "complete") {
              onComplete(result);
            } else {
              onError(result);
            }
          });

          function onComplete(data) {
            console.log(data);
          }

          function onError(data) {
            console.log(data);
          }
        });
      }
    });
    return {
      map,
    };
  },
  create() {},
  methods: {
    ininMap() {
      AMapLoader.load({
        key: "a1a0cc5457b31158333ad0bab1a4fd03", //设置您的key
        version: "2.0",
        plugins: ["AMap.ToolBar", "AMap.Driving"],
        AMapUI: {
          version: "1.1",
          plugins: [],
        },
        Loca: {
          version: "2.0.0",
        },
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            viewMode: "3D",
            resizeEnable: true,
            zoom: 11,
            zooms: [2, 22],
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    addMarker() {},
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.ininMap();
  },
};
</script>
<style scope>
#container {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
</style>

第三步
在dialog中引入地图组件，注意加上position: absolute，否则在弹窗中使用会报错，不显示地图

<map-vue v-if="dialogVisible" style="position: absolute"></map-vue>