添加 baidumap

package.json

@@ -40,7 +40,8 @@
     "nprogress": "^0.2.0",
     "prismjs": "^1.25.0",
     "vue-filepond": "^6.0.3",
-    "svg-sprite-loader": "^5.0.0"
+    "svg-sprite-loader": "^5.0.0",
+    "vue-baidu-map": "^0.21.22"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.13",

src/api/map.js

@@ -0,0 +1,19 @@
+import { get, post, delete0 } from '@/utils/request'
+
+const mapAPI = {
+  center: '/api/data/map/center',
+  markers: '/api/data/map/markers',
+  location: '/api/data/map/location'
+}
+
+export function getMapCenter() {
+  return get(mapAPI.center)
+}
+
+export function getMapMarkers() {
+  return get(mapAPI.markers)
+}
+
+export function sendClickedLocation(loc) {
+  return post(mapAPI.location, loc)
+}

src/main.js

@@ -32,6 +32,11 @@ import 'mavon-editor/dist/css/index.css'
 import mavonEditor from 'mavon-editor'
 Vue.use(mavonEditor)
 
+import BaiduMap from 'vue-baidu-map'
+Vue.use(BaiduMap, {
+  ak: ''
+})
+
 Vue.config.productionTip = false // 阻止控制台打印生产模式下的消息
 Vue.prototype.baseURL = '//api.reghao.cn'
 // this.$user 引用登录的用户

src/router/index.js

@@ -38,6 +38,7 @@ const UserPostArticle = () => import('views/post/PostList')
 const PostAnalysis = () => import('views/post/PostAnalysis')
 const MessageIndex = () => import('views/message/Message')
 const DiscoverIndex = () => import('views/home/Discover')
+const BdMap = () => import('views/home/BdMap')
 
 // 使用安装路由插件
 Vue.use(VueRouter)
@@ -272,6 +273,11 @@ const routes = [
     name: 'MessageIndex',
     component: MessageIndex
   },
+  {
+    path: '/map',
+    name: 'BdMap',
+    component: BdMap
+  },
   {
     path: '*',
     name: '404',

src/views/home/BdMap.vue

@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <label>关键词：<input v-model="keyword"></label>
+    <label>地区：<input v-model="location"></label>
+    <!-- zoom=7 比例尺为 100km   -->
+    <baidu-map
+      :center="center1"
+      :scroll-wheel-zoom="true"
+      :zoom="7"
+      class="bm-view"
+      @click="getClickInfo"
+      @ready="onBaiduMapReady"
+    >
+      <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location" />
+      <!--比例尺控件左上角-->
+      <bm-scale anchor="BMAP_ANCHOR_TOP_LEFT" />
+      <!--缩放控件右下角-->
+      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" />
+      <bm-marker
+        v-for="(item,index) in locations"
+        :key="index"
+        :position="item"
+        @click="getPoint(item)"
+      >
+        <bm-label
+          :content="item.title"
+          :label-style="{color: 'blue', fontSize : '10px'}"
+          :offset="{width: -35, height: 30}"
+        />
+      </bm-marker>
+    </baidu-map>
+  </div>
+</template>
+
+<script>
+import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
+import BmScale from 'vue-baidu-map/components/controls/Scale'
+import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
+import BmMarker from 'vue-baidu-map/components/overlays/Marker'
+
+import { getMapMarkers, sendClickedLocation } from '@/api/map'
+
+export default {
+  components: {
+    BaiduMap,
+    BmScale, // 比例尺
+    BmNavigation, // 缩放
+    BmMarker // 标记
+  },
+  data() {
+    return {
+      BMap: null,
+      locations: [
+        /*{ title: '成都', lng: 104.066, lat: 30.666 },
+        { title: '北京', lng: 116.404, lat: 39.915 }*/
+      ],
+      center: { title: '成都', lng: 104.066, lat: 30.666 },
+      center1: { title: '武汉', lng: 114.322493, lat: 30.586445 },
+      location: '成都',
+      keyword: ''
+    }
+  },
+  created() {
+  },
+  methods: {
+    onBaiduMapReady(e) {
+      const that = this
+      this.BMap = e.BMap
+      if (this.BMap) {
+        // 获取定位地址信息并赋值给声明变量
+        // Geolocation 对象的 getCurrentPosition()、watchPosition()、clearWatch() 方法详解 ：https://blog.csdn.net/zyz00000000/article/details/82774543
+        const geolocation = new this.BMap.Geolocation()
+        // 通过 getCurrentPosition() 方法：获取当前的位置信息
+        geolocation.getCurrentPosition(res => {
+          // console.log('返回详细地址和经纬度', res)
+          const { lng, lat } = res.point
+          const { province, city, district, street, street_number } = res.address
+
+          that.center = { lng, lat }
+          that.choosedLocation = { province, city, district, addr: street + street_number, lng, lat }
+        })
+
+        getMapMarkers().then(res => {
+          if (res.code === 0) {
+            this.locations = res.data
+          } else {
+            this.$notify({
+              title: res.status,
+              message: res.data,
+              type: 'warning',
+              duration: 500
+            })
+          }
+        }).catch(error => {
+            this.$message.error(error.message)
+          })
+      }
+    },
+    getClickInfo(e) {
+      console.log(e)
+      // 调整地图中心位置
+      this.center.lng = 104.066
+      this.center.lat = 30.666
+
+      // 此时已经可以获取到BMap类
+      if (this.BMap) {
+        const that = this
+        // Geocoder() 类进行地址解析
+        // 创建地址解析器的实例
+        const geoCoder = new this.BMap.Geocoder()
+        // getLocation() 类--利用坐标获取地址的详细信息
+        // getPoint() 类--获取位置对应的坐标
+        geoCoder.getLocation(e.point, function(res) {
+          console.log('获取经纬度', e.point, '获取详细地址', res)
+          const lng = e.point.lng
+          const lat = e.point.lat
+          const addrComponent = res.addressComponents
+          const surroundingPois = res.surroundingPois
+          const province = addrComponent.province
+          const city = addrComponent.city
+          const district = addrComponent.district
+          let addr = addrComponent.street
+          if (surroundingPois.length > 0 && surroundingPois[0].title) {
+            if (addr) {
+              addr += `-${surroundingPois[0].title}`
+            } else {
+              addr += `${surroundingPois[0].title}`
+            }
+          } else {
+            addr += addrComponent.streetNumber
+          }
+          that.choosedLocation = { province, city, district, addr, lng, lat }
+          // sendClickedLocation(that.choosedLocation)
+        })
+      }
+    },
+    getPoint(item) {
+      console.log('获取 marker 信息')
+      console.log(item)
+      console.log('---------------------')
+    }
+  }
+}
+</script>
+
+<style>
+.bm-view {
+  width: 100%;
+  height: 600px;
+}
+</style>