From 405eeb045cfecff07b80a33582033be6cc52ed33 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期三, 14 十二月 2022 14:36:06 +0800
Subject: [PATCH] 样式修改
---
src/components/map/index.vue | 65 +++++++++++++++++++++-----------
1 files changed, 43 insertions(+), 22 deletions(-)
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 3f4d905..34e89bf 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -1,33 +1,54 @@
<template>
- <div id="container"></div>
+ <div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
- data() {
- return {
- map: null,
- }
- },
- mounted() {
- AMapLoader.load({
- key: "091ade377d4db40f68cc78cb9658ce8d", // 鐢宠濂界殑Web绔紑鍙戣�匥ey锛岄娆¤皟鐢� load 鏃跺繀濉�
- version: "2.0", // 鎸囧畾瑕佸姞杞界殑 JSAPI 鐨勭増鏈紝缂虹渷鏃堕粯璁や负 1.4.15
- plugins: [], // 闇�瑕佷娇鐢ㄧ殑鐨勬彃浠跺垪琛紝濡傛瘮渚嬪昂'AMap.Scale'绛�
- })
- .then((AMap) => {
- this.map = new AMap.Map("container");
- this.map.setZoomAndCenter(15,['119.27179890', '28.59027084']);
- })
- .catch((e) => {
- console.log(e);
- });
+ data() {
+ return {
+ map: null,
+ };
+ },
+ created() {
+ debugger;
+ if (!this.point) {
+ this.point = { x: "119.27179890", y: "28.59027084" };
}
-}
+ if (!this.zoom) {
+ this.zoom = 15;
+ }
+ },
+ mounted() {
+ AMapLoader.load({
+ key: "091ade377d4db40f68cc78cb9658ce8d", // 鐢宠濂界殑Web绔紑鍙戣�匥ey锛岄娆¤皟鐢� load 鏃跺繀濉�
+ version: "2.0", // 鎸囧畾瑕佸姞杞界殑 JSAPI 鐨勭増鏈紝缂虹渷鏃堕粯璁や负 1.4.15
+ plugins: [], // 闇�瑕佷娇鐢ㄧ殑鐨勬彃浠跺垪琛紝濡傛瘮渚嬪昂'AMap.Scale'绛�
+ })
+ .then((AMap) => {
+ this.map = new AMap.Map("container");
+ this.map.setZoomAndCenter(this.zoom, [this.point.x, this.point.y]);
+ if (this.mark) {
+ // 鍒涘缓涓�涓� Marker 瀹炰緥锛�
+ var marker = new AMap.Marker({
+ position: new AMap.LngLat(this.point.x, this.point.y), // 缁忕含搴﹀璞★紝涔熷彲浠ユ槸缁忕含搴︽瀯鎴愮殑涓�缁存暟缁刐116.39, 39.9]
+ title: this.mark.title,
+ });
+
+ // 灏嗗垱寤虹殑鐐规爣璁版坊鍔犲埌宸叉湁鐨勫湴鍥惧疄渚嬶細
+ this.map.add(marker);
+ }
+ })
+ .catch((e) => {
+ console.log(e);
+ });
+ },
+
+ props: ["point", "zoom", "mark"],
+};
</script>
<style lang="scss" scoped>
#container {
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0