修改地图

package.json

@@ -24,7 +24,7 @@
     "path-to-regexp": "2.4.0",
     "qs": "^6.8.0",
     "vue": "2.6.10",
-    "vue-baidu-map": "^0.21.22",
+    "vue-amap": "^0.5.10",
     "vue-router": "3.0.6",
     "vuex": "3.1.0"
   },

src/main.js

@@ -30,6 +30,15 @@ if (process.env.NODE_ENV === 'production') {
   mockXHR()
 }
 
+// 高德地址
+import VueAMap from 'vue-amap'
+Vue.use(VueAMap)
+VueAMap.initAMapApiLoader({
+    key: 'c7856e7c812d299cff150e74d60ea608',
+    plugin: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Geocoder'],
+    v: '1.4.4'
+})
+
 // set ElementUI lang to EN
 Vue.use(ElementUI, { locale })
 

src/views/mapDemo/index.vue

@@ -1,40 +1,92 @@
 <template>
   <div>
-    <baidu-map class="map"
-               ak="cpq3rAsODbEpnA8avGt0FWFI7vUIfzgr"
-               :center="center"
-               :zoom="zoom"
-               @ready="handler">
-    </baidu-map>
+    <el-amap :zoom="zoom" :plugin="plugin" :center="center">
+        <el-amap-marker :clickable="true" 
+            :events="marker.events" 
+            :position="marker.position"  
+            v-for="(marker, index) in markers" 
+            :key="index"  ></el-amap-marker>
+    </el-amap>
   </div>
 </template>
 <script>
-import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
 export default {
-  data () {
-    return {
-      center: { lng: 116, lat: 116 },
-      zoom: 20
+    data () {
+        let self = this
+        return {
+            zoom: 14,
+            center: [114.34371, 30.55939],
+            markers: [],
+            searchResult: [], // 搜索出来的数据
+            plugin: [{
+                pName: 'Geolocation',
+                events: {
+                    init(o) {
+                        o.getCurrentPosition((status, result) => {
+                            if(result && result.position) {
+                                self.lng = result.position.lng
+                                self.lat = result.position.lat
+                                self.center = [self.lng, self.lat]
+                                self.loaded = true
+                                self.$nextTick()
+                            }
+                        })
+                    }
+                }
+            }],
+            searchOption: {
+                pageSize: 1, // 单页显示结果条数
+                pageIndex: 1, // 页码
+                autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
+            },
+            addressDetail: null, // 输入详情地址
+            teachingSchool: null, // 教学点
 
+        }
+    },
+    mounted () {
+    },
+    methods: {
+        onSearch() {
+            if(!this.search_value) return
+            this.markers = [] // 重置位置
+            let mapSearch = new AMap.PlaceSearch(this.searchOption)
+            // 目前只需要搜索第一条数据
+            mapSearch.search(this.search_value, (status, sr) => {
+                if(sr && sr.poiList && sr.poiList.count) {
+                    let pois = sr.poiList.pois[0]
+                    this.searchResult.push(pois)
+                    this.markers.push({
+                        position: [pois.location.lng, pois.location.lat],
+                        events: this.markerEvents(pois)
+                    })
+                    this.center = [pois.location.lng, pois.location.lat]
+                } else if (sr.poiList === undefined) {
+                    throw new Error(sr);
+                }
+            })
+        },
+        markerEvents(pois) { 
+            // marker 事件列表
+            let that = this
+            return {
+                click: (e) => {
+                    let geocoder = new AMap.Geocoder()
+                    geocoder.getAddress(e.lnglat, function(status, result) {
+                        if(status === 'complete' && result.regeocode) {
+                            that.addressDetail = result.regeocode.formattedAddress
+                        } else {
+                            that.$toast('请重新选择地址')
+                        }
+                    })
+                }
+            }
+        }
     }
-  },
-  mounted () {
-  },
-  components: {
-    BaiduMap,
-  },
-  methods: {
-    handler () {
-      //{ BMap, map }
-      this.center.lng = 116.404
-      this.center.lat = 39.915
-      this.zoom = 15
-    }
-  }
 }
 </script>
 <style lang="scss">
-.map {
+.el-vue-amap-container {
   width: 100%;
   height: 500px;
 }

vue.config.js

@@ -14,7 +14,10 @@ const name = defaultSettings.title || 'vue Admin Template' // page title
 // You can change the port by the following methods:
 // port = 9528 npm run dev OR npm run dev --port = 9528
 // const port = process.env.port || process.env.npm_config_port || 9528 // dev port
-
+// http://47.99.212.176:8000
+// http://192.168.3.28:8000
+let target = 'http://47.99.212.176:8000'
+// let target = 'http://192.168.3.28:8000'
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
   /**
@@ -42,14 +45,14 @@ module.exports = {
       // http://47.99.212.176:8000
       // http://192.168.3.28:8000
       '/api-auth': {
-        target: 'http://192.168.3.28:8000',
+        target: target,
         changeOrigin: true,
         pathRewrite: {
           '^api-auth': ''
         }
       },
       '/web-server': {
-        target: 'http://192.168.3.28:8000',
+        target: target,
         changeOrigin: true,
         pathRewrite: {
           '^web-server': ''