亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

muddyway / 696人閱讀

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

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

今天有個項目需要用到百度地圖，一般我們在移動端使用百度地圖，都是直接通過這樣的方式，直接引入百度地圖的jsApi。

這種方法的原理，就是直接給全局widow對象添加一個BMap對象，從而可以使我們在已經(jīng)加載api的頁面的任何地方，使用百度地圖的api。但是單單通過引入的方法，對于使用單文件組件的vue+webpack開發(fā)的項目，顯然是不夠的。于是，通過網(wǎng)上查資料。這里找到了兩種方法。

直接引入script標簽

第一種方法是通過直接引入的方法，當然除了引入script標簽還不夠，要想在vue文件中使用bmap對象，還需要在webpack的配置文件中，設置外部擴展(externals屬性)

//webpack.dev.conf.js

externals: {
    "BaiduMap": "BMap"
}

externales屬性來自官方的解釋是:

防止將某些 import 的包(package)打包到 bundle 中，而是在運行時(runtime)再去從外部獲取這些擴展依賴(external dependencies)。

webpack文檔也給出了一個示例：從 CDN 引入 jQuery，而不是把它打包。
index.html

webpack.config.js

externals: {
  jquery: "jQuery"
}
import $ from "jquery";

$(".my-element").animate(...);

參考這個實例，我們就可以在我們的項目中通過引入js文件的方法，直接使用百度地圖的api。

import BaiduMap from "BaiduMap"
export default {
    name: "Index",
    .....
mounted() {
        
    var map = new BaiduMap.Map("allmap")                        // 創(chuàng)建地圖實例
    var point = new BaiduMap.Point(120.343373,31.540212)        // 創(chuàng)建中心點坐標
    var marker = new BaiduMap.Marker(point) // 創(chuàng)建標注

    map.centerAndZoom(point,15)                         // 初始化地圖，設置中心點坐標和地圖級別


    map.addOverlay(marker) // 將標注添加到地圖中

}

注意這里，實例化地圖api，最好要在mounted階段進行，如果你的dom中采用的是官方的示例如

因為只有在mounted的階段，dom才會生成并掛載。

通過模塊化引入的方法

實際上百度地圖官方去年已經(jīng)開源了基于jsApi的vue和react的對應開源組件，我們可以直接通過npm安裝，然后使用。
VUE:[https://github.com/Dafrok/vue...]
React:[https://github.com/huiyan-fe/...]
可參考它們在github上面的文檔進行使用。這里只介紹下vue的。
安裝

npm i vue-baidu-map --save

初始化

import Vue from "vue"
import BaiduMap from "vue-baidu-map"

Vue.use(BaiduMap, {
  ak: "YOUR_APP_KEY"    //這個地方是官方提供的ak密鑰
})

使用

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/96300.html

相關文章

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

    摘要：當屬性為合法地名字符串時例外，因為百度地圖會根據(jù)地名自動調整的值由于百度地圖只有一種加載方式，因此組件及其所有子組件的渲染只能是異步的。 在使用vue做項目的時候，有用到百度地圖，使用了vue-baidu-map插件，包括拾取位置坐標，搜索位置等 1.引入方式 showImg(https://segmentfault.com/img/bVbv0hs?w=835&h=531); 可在ap...

    番茄西紅柿 評論0 收藏0

  • vue地圖可視化 ArcGIS篇（3）

    摘要：不建議底圖選擇中存在兩種不同坐標體系，如下圖坐標存在明顯的偏差，火星坐標在采用坐標系的地圖上位置偏上彩色中國天地圖全球衛(wèi)星地圖例如我們使用的類進行查找，返回的數(shù)據(jù)都是國際坐標，因此必須進行偏差糾正。 ArcGIS for javascript開發(fā)心得 本次實例中采用ArcGIS for javascript3.24版本，由于版本3與4在API等存在較大區(qū)別，就不一一列舉，詳細區(qū)別看官方...

    oogh 評論0 收藏0

  • vue異步加載高德地圖

    摘要：異步加載異步加載指的是為指定加載的回調函數(shù)，在的主體資源加載完畢之后，將自動調用該回調函數(shù)。 幾種加載js的方式 同步加載 異步加載 延遲加載 同步加載 用的最多的一種方式，又稱阻塞模式，會阻止瀏覽器的后續(xù)處理，停止后續(xù)的解析，只有當當前加載完成，才能進行下一步操作。所以默認同步執(zhí)行才是安全的。但這樣如果js中有輸出document內容、修改dom、重定向等行為，就會造成頁面堵塞。...

    zacklee 評論0 收藏0

  • 前端小知識--地圖坐標轉換

    摘要：實際中我們可能會用到不同的地圖，那么就對應到不同坐標系的轉換，比如說，你有一份的數(shù)據(jù)服務，你要展現(xiàn)在百度或者高德地圖上，這時候你就需要轉換了。 地圖坐標轉換 LBS，基于位置的服務（Location Based Service)，近年來已經(jīng)無處不在，尤其是我們前端，相信或多或少都有接觸一些地圖API服務，比如高德、百度啊、谷歌啊~但是用的時候可能看到下面這些字眼：比如BD09、火星坐標...

    liangdas 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<