master

3 years ago · 4c42a45d34
6 changed files with 89 additions and 8 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -4,6 +4,11 @@
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
+    "@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+    },
    "@babel/code-frame": {
      "version": "7.16.7",
      "resolved": "https://registry.npmmirror.com/@babel/code-frame/download/@babel/code-frame-7.16.7.tgz",
--- a/package.json
+++ b/package.json
@ -7,6 +7,7 @@
    "build": "vue-cli-service build"
  },
  "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
    "black-knight": "git+https://gitee.com/aygj/vue3_tool_fit.git",
    "core-js": "^3.6.5",
    "element-plus": "^1.3.0-beta.3",
--- a/public/index.html
+++ b/public/index.html
@ -5,6 +5,7 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
--- a/src/views/About.vue
+++ b/src/views/About.vue
@ -1,6 +1,6 @@
 <template>
  <div class="about">
-    <h1>This is an about page</h1>
+    <h1></h1>
  </div>
 </template>
 <script>
--- a/src/views/Demo.vue
+++ b/src/views/Demo.vue
@ -5,11 +5,14 @@
 	</div>
 </template>
 <script>
-import { defineComponent } from 'vue'
+import { defineComponent,onActivated } from 'vue'

 export default defineComponent({
 	name:"demo",
 	setup() {
+		onActivated(()=>{
+			console.log("------onActivated-----------------demo---------")
+		})
 		console.log("--------------demo-------------")
 	},
 })
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -1,20 +1,91 @@
 <template>
  <div class="home">
    <h1>This is an home page</h1>
-    <svg-icon iconClass="atm" @click="$router.push({path:'/path3'})"/>
+    <input id="search"/>
+    <div style="width:700px;height:600px;border:1px solid #ddd;" ref="map"/>
  </div>
 </template>

 <script>
-import { defineComponent } from 'vue'
+import { defineComponent, onMounted, shallowRef } from 'vue'
+import AMapLoader from "@amap/amap-jsapi-loader"

 export default defineComponent({
  name:"home",
-	created(){
-		console.log('-----------home--------created----------')
-	},
  setup() {
-    console.log("---------home------------------------")
+    var map;
+
+    var _data={
+      map:shallowRef(null),
+    }
+
+    onMounted(()=>{
+      window._AMapSecurityConfig={
+        securityJsCode:"3eceddef3eafbf06e01107c78db2c264",
+      }
+      AMapLoader.load({key:"3b999eeef15d7b6ca6a3fd0c9531160d",version:"2.0",plugins:["AMap.PolygonEditor,AMap.AutoComplete"]}).then(AMap=>{
+        map=new AMap.Map(_data.map.value,{
+          viewMode:"3D",
+          zoom:16,
+          zooms:[13,16.75],
+          center:[103.144875, 25.482653],
+          layers:[
+            // 卫星
+            new AMap.TileLayer.Satellite(),
+            // 路网
+            new AMap.TileLayer.RoadNet()
+          ],
+        })
+        window.m=map
+        //多边形
+        var polygon=new AMap.Polygon({
+          path:[
+            [103.154206, 25.482612],
+            [103.154297, 25.482324],
+            [103.154146, 25.481694],
+            [103.15457, 25.481461],
+            [103.154813, 25.482379],
+            [103.154555, 25.482448]
+          ],
+          strokeColor: "#FF33FF", 
+          strokeWeight: 1,
+          strokeOpacity: 0.7,
+          fillOpacity: 0.2,
+          fillColor: '#1791fc',
+          zIndex: 50,
+        })
+        var polygon1=new AMap.Polygon({
+          path:[
+            [103.145047, 25.483922],
+            [103.149596, 25.483689],
+            [103.145798, 25.480222],
+          ],
+          strokeColor: "#FF33FF", 
+          strokeWeight: 3,
+          strokeOpacity: 0.7,
+          fillOpacity: 0.2,
+          fillColor: '#1791fc',
+          zIndex: 60,
+        })
+        map.add([polygon,polygon1])
+        var polyEditor=new AMap.PolygonEditor(map)
+        polyEditor.on("end",res=>{
+          console.log("---------end-------------")
+        })
+        // polyEditor.open()
+
+        var auto = new AMap.AutoComplete({
+          input:"search",
+        });
+        setTimeout(()=>{
+          auto.search('北京',(a,b)=>{
+            console.log(a,"-------aaaaaa----------")
+            console.log(b,"----------bbbbbbb---------")
+          })
+        },1000)
+      })
+    })
+    return _data;
  },
 })
 </script>