diff --git a/package-lock.json b/package-lock.json index f4bc2fc..86cd118 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "license": "MIT", "dependencies": { + "@amap/amap-jsapi-loader": "^1.0.1", "@element-plus/icons-vue": "^2.0.6", "@highlightjs/vue-plugin": "^2.1.0", "@wangeditor/editor": "^5.1.12", @@ -61,6 +62,11 @@ "vue-tsc": "^0.38.1" } }, + "node_modules/@amap/amap-jsapi-loader": { + "version": "1.0.1", + "resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz", + "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw==" + }, "node_modules/@ampproject/remapping": { "version": "2.2.0", "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.0.tgz", diff --git a/package.json b/package.json index cb95e19..fa3ca5d 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" }, "dependencies": { + "@amap/amap-jsapi-loader": "^1.0.1", "@element-plus/icons-vue": "^2.0.6", "@highlightjs/vue-plugin": "^2.1.0", "@wangeditor/editor": "^5.1.12", diff --git a/src/components/map/MapContainer.vue b/src/components/map/MapContainer.vue new file mode 100644 index 0000000..e4bb920 --- /dev/null +++ b/src/components/map/MapContainer.vue @@ -0,0 +1,39 @@ +<template> + <div id="container"></div> +</template> + +<script lang="ts" setup name="mapContainer"> +import AMapLoader from "@amap/amap-jsapi-loader"; +import { shallowRef } from "@vue/reactivity"; + +const map = shallowRef(null); + +const initMap = () => { + AMapLoader.load({ + key: "", // 申请好的Web端开发者Key,首次调用 load 时必填 + version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 + plugins: [""], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 + }) + .then((AMap) => { + map = new AMap.Map("container", { + //设置地图容器id + viewMode: "2D", //是否为3D地图模式 + zoom: 5, //初始化地图级别 + center: [105.602725, 37.076636], //初始化地图中心点位置 + }); + }) + .catch((e) => { + console.log(e); + }); +}; +</script> + + +<style lang="scss" scoped> +#container { + padding: 0px; + margin: 0px; + width: 100%; + height: 800px; +} +</style> \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 7cfcf54..5105088 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,11 @@ # yarn lockfile v1 +"@amap/amap-jsapi-loader@^1.0.1": + version "1.0.1" + resolved "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz" + integrity sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw== + "@ampproject/remapping@^2.1.0": version "2.2.0" resolved "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.0.tgz"