vue項目中使用百度地圖(vue-baidu-map)

番茄西紅柿發布于2019-08-26 10:35 / 602人閱讀

摘要：當屬性為合法地名字符串時例外，因為百度地圖會根據地名自動調整的值由于百度地圖只有一種加載方式，因此組件及其所有子組件的渲染只能是異步的。

在使用vue做項目的時候，有用到百度地圖，使用了vue-baidu-map插件，包括拾取位置坐標，搜索位置等

1.引入方式

可在app.js中全局引入

import BaiduMap from "vue-baidu-map"

Vue.use(BaiduMap, {
  /* 需要注冊百度地圖開發者來獲取你的ak */
  ak: "YOUR_APP_KEY"
})

也可以局部引入，組件需在node_modules/vue-baidu-map/components里面找，局部引入要在中聲明ak屬性

import BaiduMap from "vue-baidu-map/components/map/Map.vue"
import BmView from "vue-baidu-map/components/map/MapView.vue"
import BmLocalSearch from "vue-baidu-map/components/search/LocalSearch.vue"
export default {
  components: {
      BaiduMap,
      BmView,
      BmLocalSearch
  },
}

使用(局部引用需要加上ak屬性)

注意點：(地圖需要顯示的定義高度)

BmView 是用于渲染百度地圖實例可視化區域的容器，通常與 LocalSearch 等會輸出其它視圖的組件結合使用
BaiduMap 組件容器本身是一個空的塊級元素，如果容器不定義高度，百度地圖將渲染在一個高度為 0 不可見的容器內
沒有設置 center 和 zoom 屬性的地圖組件是不進行地圖渲染的。當center 屬性為合法地名字符串時例外，因為百度地圖會根據地名自動調整 zoom 的值
由于百度地圖 JS API 只有 JSONP 一種加載方式，因此 BaiduMap 組件及其所有子組件的渲染只能是異步的。因此，請使用在組件的 ready 事件來執行地圖 API 加載完畢后才能執行的代碼，不要試圖在 vue 自身的生命周期中調用 BMap 類，更不要在這些時機修改 model 層。

百度地圖開發平臺jsAPI：百度地圖jsAPI

vue-baidu-map文檔：vue-baidu-map文檔

高德地圖vue-amap文檔：高德地圖文檔

2.搜索

搜索是利用bm-local-search來進行搜索，這個不知道是不是因為我外層用了固定定位，導致我在輸入框中輸入位置后，就把地圖給覆蓋了，沒有做到官方文檔那種，然后我就用了display: none來隱藏這個容器

data() {
    return {
      location: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 12.8,
      addressKeyword: "",
    };
},
methods: {
    getLocationPoint(e) {
      this.lng = e.point.lng;
      this.lat = e.point.lat;
      /* 創建地址解析器的實例 */
      let geoCoder = new BMap.Geocoder();
      /* 獲取位置對應的坐標 */
      geoCoder.getPoint(this.addressKeyword, point => {
        this.selectedLng = point.lng;
        this.selectedLat = point.lat;
      });
      /* 利用坐標獲取地址的詳細信息 */
      geocoder.getLocation(e.point, res=>{
          console.log(res);
      },
}

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

往期推薦：

實現單行及多行文字超出后加省略號

判斷iOS和Android及PC端

使用vue開發移動端管理后臺

畫三角形

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106441.html

vue.js下引入百度地圖jsApi的兩種方法

摘要：下引入百度地圖的兩種方法前言今天有個項目需要用到百度地圖，一般我們在移動端使用百度地圖，都是直接通過這樣的方式，直接引入百度地圖的。通過模塊化引入的方法實際上百度地圖官方去年已經開源了基于的和的對應開源組件，我們可以直接通過安裝，然后使用。 vue.js下引入百度地圖jsApi的兩種方法前言今天有個項目需要用到百度地圖，一般我們在移動端使用百度地圖，都是直接通過這樣的方式，直接引入...

muddyway 2019-08-23 10:23 評論0 收藏0
vue 地圖可視化（1）

摘要：百度地圖百度地圖作為項目中地圖可視化最重要的一部分，不止其為國人自己的地圖，還因為其完善的技術文檔案例和多樣化的開源插件等上有的組件可以直接使用，有興趣的同學可以直接上手這里不采用已經封裝好的地圖組件，而是從零開始，采用原生的百度地圖一百度地圖百度地圖作為項目中地圖可視化最重要的一部分，不止其為國人自己的地圖，還因為其完善的技術文檔案例和多樣化的開源插件（echarts、Mapv等...

1treeS 2019-08-22 16:08 評論0 收藏0
vue-baidu-map 進入頁面自動定位的解決方案！

摘要：我試過，以上這種方法好像是可行，效果可以出來，但我們最好采用作者提供的正確方法推薦這種方法那下面解決進入頁面自動定位的方法也是在這里。寫在前面：我只是一個前端小白，文章中的提到可能會有不足之處，僅提供一個參考。若有不完善的地方，歡迎各位大佬指出！，希望對你有幫助！好了，入正題。其實之前也被這問題困擾過，在網上也查了一番，沒找到解決方法。直到今天，在GitHub冒昧地向大佬提了一個i...

GeekGhc 2019-08-22 16:46 評論0 收藏0
vue 百度地圖api進行地理解析(解決跨域問題)

摘要：我采用了插件原生百度地圖的二次封裝，但是插件里的紅點標記需要用到經緯度值。先扯一會兒首先非常感謝大家的閱讀(感謝已加粗)，這是我人生中第一次寫技術文章(以前打字都費勁)，本人小white一個(秀一下英語詞匯量)，技術不咋地，就是愛分享，動不動還來個原創，你說氣人不~ 閑話少說，進入主題！！！重點部分最近在做一個基于vue的設備管理系統，其中有一個需求：需要把設備所在地的...

Freeman 2019-08-26 10:13 評論0 收藏0