vue-baidu-map demo

package-lock.json

@@ -1151,9 +1151,9 @@
       "dev": true
     },
     "@petamoriken/float16": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmmirror.com/@petamoriken/float16/-/float16-3.6.2.tgz",
-      "integrity": "sha512-zZnksXtFBqvONcXWuAtSWrl3YXaDbU2ArRCCuzM42mP0GBJclD6e0GC3zEemmrjiMSOHcLPyRC4vOnAsnomJIw=="
+      "version": "3.6.3",
+      "resolved": "https://registry.npmmirror.com/@petamoriken/float16/-/float16-3.6.3.tgz",
+      "integrity": "sha512-Yx6Z93kmz3JVPYoPPRFJXnt2/G4kfaxRROcZVVHsE4zOClJXvkOVidv/JfvP6hWn16lykbKYKVzUsId6mqXdGg=="
     },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.7.1",
@@ -2327,7 +2327,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npm.taobao.org/argparse/download/argparse-1.0.10.tgz",
       "integrity": "sha1-vNZ5HqWuCXJeF+WtmIE0zUCz2RE=",
-      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -2704,6 +2703,34 @@
       "integrity": "sha1-nyKcFb4nJFT/qXOs4NvueaGww28=",
       "dev": true
     },
+    "bmaplib.curveline": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/bmaplib.curveline/-/bmaplib.curveline-1.0.0.tgz",
+      "integrity": "sha512-9wcFMVhiYxNPqpvsLDAADn3qDhNzXp2mA6VyHSHg2XOAgSooC7ZiujdFhy0sp+0QYjTfJ/MjmLuNoUg2HHxH4Q=="
+    },
+    "bmaplib.heatmap": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/bmaplib.heatmap/-/bmaplib.heatmap-1.0.4.tgz",
+      "integrity": "sha512-rmhqUARBpUSJ9jXzUI2j7dIOqnc38bqubkx/8a349U2qtw/ulLUwyzRD535OrA8G7w5cz4aPKm6/rNvUAarg/Q=="
+    },
+    "bmaplib.lushu": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/bmaplib.lushu/-/bmaplib.lushu-1.0.7.tgz",
+      "integrity": "sha512-LVvgpESPii6xGxyjnQjq8u+ic4NjvhdCPV/RiSS/PGTUdZKeTDS7prSpleJLZH3ES0+oc0gYn8bw0LtPYUSz2w=="
+    },
+    "bmaplib.markerclusterer": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmmirror.com/bmaplib.markerclusterer/-/bmaplib.markerclusterer-1.0.13.tgz",
+      "integrity": "sha512-VrLyWSiuDEVNi0yUfwOhFQ6z1oEEHS4w36GNu3iASu6p52QIx9uAXMUkuSCHReNR0bj2Cp9SA1dSx5RpojXajQ==",
+      "requires": {
+        "bmaplib.texticonoverlay": "^1.0.2"
+      }
+    },
+    "bmaplib.texticonoverlay": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/bmaplib.texticonoverlay/-/bmaplib.texticonoverlay-1.0.2.tgz",
+      "integrity": "sha512-4ZTWr4ZP3B6qEWput5Tut16CfZgII38YwM3bpyb4gFTQyORlKYryFp9WHWrwZZaHlOyYDAXG9SX0hka43jTADg=="
+    },
     "bn.js": {
       "version": "5.1.3",
       "resolved": "https://registry.npm.taobao.org/bn.js/download/bn.js-5.1.3.tgz",
@@ -5854,36 +5881,23 @@
       "dev": true
     },
     "geotiff": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmmirror.com/geotiff/-/geotiff-2.0.4.tgz",
-      "integrity": "sha512-aG8h9bJccGusioPsEWsEqx8qdXpZN71A20WCvRKGxcnHSOWLKmC5ZmsAmodfxb9TRQvs+89KikGuPzxchhA+Uw==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/geotiff/-/geotiff-2.0.5.tgz",
+      "integrity": "sha512-U5kVYm118YAmw2swiLu8rhfrYnDKOFI7VaMjuQwcq6Intuuid9Pyb4jjxYUxxkq8kOu2r7Am0Rmb52PObGp4pQ==",
       "requires": {
         "@petamoriken/float16": "^3.4.7",
         "lerc": "^3.0.0",
-        "lru-cache": "^6.0.0",
         "pako": "^2.0.4",
         "parse-headers": "^2.0.2",
+        "quick-lru": "^6.1.0",
         "web-worker": "^1.2.0",
         "xml-utils": "^1.0.2"
       },
       "dependencies": {
-        "lru-cache": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
-          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-          "requires": {
-            "yallist": "^4.0.0"
-          }
-        },
         "pako": {
           "version": "2.0.4",
           "resolved": "https://registry.npmmirror.com/pako/-/pako-2.0.4.tgz",
           "integrity": "sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg=="
-        },
-        "yallist": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
-          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
         }
       }
     },
@@ -7240,6 +7254,14 @@
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
       "dev": true
     },
+    "linkify-it": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/linkify-it/-/linkify-it-2.2.0.tgz",
+      "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "loader-fs-cache": {
       "version": "1.0.3",
       "resolved": "https://registry.npm.taobao.org/loader-fs-cache/download/loader-fs-cache-1.0.3.tgz",
@@ -7448,6 +7470,25 @@
       "resolved": "https://registry.npmmirror.com/mapbox-to-css-font/-/mapbox-to-css-font-2.4.1.tgz",
       "integrity": "sha512-QQ/iKiM43DM9+aujTL45Iz5o7gDeSFmy4LPl3HZmNcwCE++NxGazf+yFpY+wCb+YS23sDa1ghpo3zrNFOcHlow=="
     },
+    "markdown-it": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmmirror.com/markdown-it/-/markdown-it-8.4.2.tgz",
+      "integrity": "sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==",
+      "requires": {
+        "argparse": "^1.0.7",
+        "entities": "~1.1.1",
+        "linkify-it": "^2.0.0",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmmirror.com/entities/-/entities-1.1.2.tgz",
+          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
+        }
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npm.taobao.org/md5.js/download/md5.js-1.3.5.tgz",
@@ -7465,6 +7506,11 @@
       "integrity": "sha1-aZs8OKxvHXKAkaZGULZdOIUC/Vs=",
       "dev": true
     },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npm.taobao.org/media-typer/download/media-typer-0.3.0.tgz",
@@ -8191,20 +8237,20 @@
       "dev": true
     },
     "ol": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmmirror.com/ol/-/ol-6.13.0.tgz",
-      "integrity": "sha512-Fa6yt+FArWE9fwYRRhi/8+ULcFDRS2ZuDcLp3R9bQeDVa5T4E4TT9iqLeJhmHG+bzWiLWJHIeFUqw8GD2gW0YA==",
+      "version": "6.14.1",
+      "resolved": "https://registry.npmmirror.com/ol/-/ol-6.14.1.tgz",
+      "integrity": "sha512-sIcUWkGud3Y2gT3TJubSHlkyMXiPVh1yxfCPHxmY8+qtm79bB9oRnei9xHVIbRRG0Ro6Ldp5E+BMVSvYCxSpaA==",
       "requires": {
         "geotiff": "^2.0.2",
-        "ol-mapbox-style": "^7.0.0",
+        "ol-mapbox-style": "^7.1.1",
         "pbf": "3.2.1",
         "rbush": "^3.0.1"
       }
     },
     "ol-mapbox-style": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmmirror.com/ol-mapbox-style/-/ol-mapbox-style-7.0.0.tgz",
-      "integrity": "sha512-y0OrKfx/TBcbGUf0UefDuYPSfMCCjPz0aUttm/kG461CNwzJpGavvf/lJ7nyNfeHSJFr0iEEdAbB98UUUQQkww==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmmirror.com/ol-mapbox-style/-/ol-mapbox-style-7.1.1.tgz",
+      "integrity": "sha512-GLTEYiH/Ec9Zn1eS4S/zXyR2sierVrUc+OLVP8Ra0FRyqRhoYbXdko0b7OIeSHWdtJfHssWYefDOGxfTRUUZ/A==",
       "requires": {
         "@mapbox/mapbox-gl-style-spec": "^13.20.1",
         "mapbox-to-css-font": "^2.4.1",
@@ -8432,9 +8478,9 @@
       }
     },
     "parse-headers": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmmirror.com/parse-headers/-/parse-headers-2.0.4.tgz",
-      "integrity": "sha512-psZ9iZoCNFLrgRjZ1d8mn0h9WRqJwFxM9q3x7iUjN/YT2OksthDJ5TiPCu2F38kS4zutqfW+YdVVkBZZx3/1aw=="
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/parse-headers/-/parse-headers-2.0.5.tgz",
+      "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
     },
     "parse-json": {
       "version": "5.1.0",
@@ -9417,6 +9463,11 @@
       "integrity": "sha1-M0WUG0FTy50ILY7uTNogFqmu9/Y=",
       "dev": true
     },
+    "quick-lru": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmmirror.com/quick-lru/-/quick-lru-6.1.1.tgz",
+      "integrity": "sha512-S27GBT+F0NTRiehtbrgaSE1idUAJ5bX8dPAQTdylEyNlrdcH5X4Lz7Edz3DYzecbsCluD5zO8ZNEe04z3D3u6Q=="
+    },
     "quickselect": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/quickselect/-/quickselect-2.0.0.tgz",
@@ -10573,8 +10624,7 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npm.taobao.org/sprintf-js/download/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
     "sshpk": {
       "version": "1.16.1",
@@ -11212,6 +11262,11 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npm.taobao.org/uglify-js/download/uglify-js-3.4.10.tgz",
@@ -11589,6 +11644,18 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz?cache=0&sync_timestamp=1599065174070&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.12.tgz",
       "integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
     },
+    "vue-baidu-map": {
+      "version": "0.21.22",
+      "resolved": "https://registry.npmmirror.com/vue-baidu-map/-/vue-baidu-map-0.21.22.tgz",
+      "integrity": "sha512-WQMPCih4UTh0AZCKKH/OVOYnyAWjfRNeK6BIeoLmscyY5aF8zzlJhz/NOHLb3mdztIpB0Z6aohn4Jd9mfCSjQw==",
+      "requires": {
+        "bmaplib.curveline": "^1.0.0",
+        "bmaplib.heatmap": "^1.0.4",
+        "bmaplib.lushu": "^1.0.7",
+        "bmaplib.markerclusterer": "^1.0.13",
+        "markdown-it": "^8.4.0"
+      }
+    },
     "vue-cli-plugin-vuetify": {
       "version": "2.0.7",
       "resolved": "https://registry.npm.taobao.org/vue-cli-plugin-vuetify/download/vue-cli-plugin-vuetify-2.0.7.tgz",

package.json

@@ -21,10 +21,11 @@
     "flv.js": "^1.6.2",
     "hls.js": "^1.1.2",
     "js-cookie": "2.2.0",
-    "ol": "^6.13.0",
+    "ol": "^6.14.1",
     "shaka-player": "^3.2.1",
     "v-viewer": "^1.6.4",
     "vue": "^2.6.12",
+    "vue-baidu-map": "^0.21.22",
     "vue-cookies": "^1.7.4",
     "vue-filepond": "^6.0.3",
     "vue-infinite-scroll": "^2.0.2",

src/main.js

@@ -7,10 +7,14 @@ import VueCookies from 'vue-cookies'
 import infiniteScroll from 'vue-infinite-scroll'
 import 'viewerjs/dist/viewer.css'
 import VueViewer from 'v-viewer'
+import BaiduMap from 'vue-baidu-map'
 
 Vue.use(VueCookies)
 Vue.use(infiniteScroll)
 Vue.use(VueViewer)
+Vue.use(BaiduMap, {
+  ak: ''
+})
 
 Vue.config.productionTip = false
 

src/router/index.js

@@ -21,7 +21,7 @@ const routes = [
       {
         path: '/live',
         name: 'Live',
-        component: () => import('@/views/home/live.vue'),
+        component: () => import('@/views/home/bdmap.vue'),
         meta: { title: 'HerTube 直播' }
       },
       {

src/views/home/bdmap.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <label>关键词：<input v-model="keyword"></label>
+    <label>地区：<input v-model="location"></label>
+    <baidu-map
+      :center="{ lng: 104.066, lat: 30.666 }"
+      :scroll-wheel-zoom="true"
+      :zoom="12"
+      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"
+      >
+        <bm-label
+          :content="item.title"
+          :label-style="{color: 'red', fontSize : '12px'}"
+          :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'
+
+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 },
+      location: '成都',
+      keyword: '环球中心'
+    }
+  },
+  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 }
+        })
+      }
+    },
+    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 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, ...that.center }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style>
+  .bm-view {
+    width: 100%;
+    height: 600px;
+  }
+</style>

src/views/home/map.vue

@@ -1,24 +1,24 @@
 <template>
   <div class="home">
-    <div id="map" class="map-home"></div>
+    <div id="map" class="map-home" />
   </div>
 </template>
 
 <script>
-import { Map, View } from "ol";
-import * as olProj from "ol/proj";
-import TileLayer from "ol/layer/Tile";
-import XYZ from "ol/source/XYZ";
-import { Vector as VectorLayer} from 'ol/layer';
-import { Vector as VectorSource} from 'ol/source';
+import { Map, View } from 'ol'
+import * as olProj from 'ol/proj'
+import TileLayer from 'ol/layer/Tile'
+import XYZ from 'ol/source/XYZ'
+import { Vector as VectorLayer } from 'ol/layer'
+import { Vector as VectorSource } from 'ol/source'
 
 export default {
-  name: "Home",
+  name: 'Home',
   components: {},
   data() {
     return {
-      openMap: null,
-    };
+      openMap: null
+    }
   },
   mounted() {
     this.initMap()
@@ -27,50 +27,50 @@ export default {
   methods: {
     initMap() {
       this.openMap = new Map({
-        target: "map",
+        target: 'map',
         layers: [
           new TileLayer({
             source: new XYZ({
-              url: "https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
-            }),
-          }),
+              url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
+            })
+          })
         ],
         view: new View({
           // 将西安作为地图中心
           center: olProj.fromLonLat([108.945951, 34.465262]),
-          zoom: 1,
+          zoom: 1
         }),
         controls: []
-      });
+      })
     },
     setMarker() {
-      let _style = new Style({
+      const _style = new Style({
         image: new sCircle({
           radius: 10,
           stroke: new Stroke({
-            color: "#fff",
+            color: '#fff'
           }),
           fill: new Fill({
-            color: "#3399CC",
-          }),
-        }),
+            color: '#3399CC'
+          })
+        })
       })
 
-      let _feature = new Feature({
-        geometry: new Point(olProj.fromLonLat([108.945951, 34.465262])),
-      });
+      const _feature = new Feature({
+        geometry: new Point(olProj.fromLonLat([108.945951, 34.465262]))
+      })
       _feature.setStyle(_style)
 
-      let _marker = new VectorLayer({
+      const _marker = new VectorLayer({
         source: new VectorSource({
-          features: [_feature],
-        }),
+          features: [_feature]
+        })
       })
 
       this.openMap.addLayer(_marker)
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>