address

www/vue/.babelrc

@@ -1,7 +1,6 @@
 {
   "presets": [
     ["env", { "modules": false }],
-    ["es2015", { "modules": false }],
     "stage-2"
   ],
   "plugins": ["transform-runtime"],

www/vue/src/components/address/addressAdd.vue

@@ -1,30 +1,67 @@
 <template>
-  <div id="near">
-    <div id="amap-main">
-
-    </div>
+  <div class="amap-page-container">
+    <el-amap-search-box class="search-box" :search-option="searchOption"
+                        :on-search-result="onSearchResult"></el-amap-search-box>
+    <el-amap vid="amapDemo">
+    </el-amap>
   </div>
 </template>
+
+<style>
+  .amap-demo {
+    height: 300px;
+  }
+
+  .search-box {
+    position: absolute;
+    top: 25px;
+    left: 20px;
+  }
+
+  .amap-page-container {
+    position: relative;
+  }
+</style>
+
 <script>
-  import {lazyAMapApiLoaderInstance} from 'vue-amap'
-  import AMap from 'vue-amap'
-  export default {
-    name: 'near',
-    mounted () {
-      lazyAMapApiLoaderInstance.load().then(() => {
-        this.map = AMap.Map('container', {
-          resizeEnable: true,
-          zoom: 11,
-          center: [116.397428, 39.90923]
-        })
-      })
+  module.exports = {
+    data: function () {
+      return {
+        markers: [
+          [121.59996, 31.197646],
+          [121.40018, 31.197622],
+          [121.69991, 31.207649]
+        ],
+        searchOption: {
+          city: '上海',
+          citylimit: true
+        },
+        mapCenter: [121.59996, 31.197646]
+      }
+    },
+    methods: {
+      addMarker: function () {
+        let lng = 121.5 + Math.round(Math.random() * 1000) / 10000
+        let lat = 31.197646 + Math.round(Math.random() * 500) / 10000
+        this.markers.push([lng, lat])
+      },
+      onSearchResult (pois) {
+        let latSum = 0
+        let lngSum = 0
+        if (pois.length > 0) {
+          pois.forEach(poi => {
+            let {lng, lat} = poi
+            lngSum += lng
+            latSum += lat
+            this.markers.push([poi.lng, poi.lat])
+          })
+          let center = {
+            lng: lngSum / pois.length,
+            lat: latSum / pois.length
+          }
+          this.mapCenter = [center.lng, center.lat]
+        }
+      }
     }
   }
 </script>
-<style lang="less" scoped>
-  #near {
-    #amap-main {
-      height: 300px
-    }
-  }
-</style>

www/vue/src/components/navigation.vue

@@ -6,7 +6,7 @@
         <img slot="icon-active" :src='iconHomeActive'>
         <span slot="label">首页</span>
       </tabbar-item>
-      <tabbar-item link="/order">
+      <tabbar-item link="/addressAdd">
         <img slot="icon" :src='iconOrder'>
         <img slot="icon-active" :src='iconOrderActive'>
         <span slot="label">订单</span>

www/vue/src/main.js

@@ -9,14 +9,28 @@ import VueRouter from 'vue-router'
 import store from './store/'
 import VueAwesomeSwiper from 'vue-awesome-swiper'
 import VueScroller from 'vue-scroller'
-import AMap from 'vue-amap'
-
+// 引入vue-amap
+import AMap, {lazyAMapApiLoaderInstance} from 'vue-amap'
 Vue.use(AMap)
+// 初始化vue-amap
 AMap.initAMapApiLoader({
-  key: 'ea4228b685c663ac62af7da3a0702c97', // 刚刚开发者申请哪里的key
-  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType']
+  // 申请的高德key
+  key: 'ea4228b685c663ac62af7da3a0702c97',
+  // 插件集合
+  plugin: ['AMap.PlaceSearch']
+})
+lazyAMapApiLoaderInstance.load().then(() => {
+  // your code ...
+  this.map = new AMap.Map('amapContainer', {
+    center: new AMap.LngLat(121.59996, 31.197646)
+  })
 })
 
+// AMap.initAMapApiLoader({
+//   key: 'ea4228b685c663ac62af7da3a0702c97', // 刚刚开发者申请哪里的key
+//   plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType']
+// })
+
 // vux
 // import { AlertPlugin, ToastPlugin } from 'vux'
 // Vue.use(AlertPlugin)
@@ -75,8 +89,7 @@ new Vue({
   store,
   VueRouter,
   template: '<App/>',
-  components:
-  {
+  components: {
     App
   }
 })