資訊專欄INFORMATION COLUMN
摘要：下引入百度地圖的兩種方法前言今天有個(gè)項(xiàng)目需要用到百度地圖，一般我們?cè)谝苿?dòng)端使用百度地圖，都是直接通過這樣的方式，直接引入百度地圖的。通過模塊化引入的方法實(shí)際上百度地圖官方去年已經(jīng)開源了基于的和的對(duì)應(yīng)開源組件，我們可以直接通過安裝，然后使用。
vue.js下引入百度地圖jsApi的兩種方法 前言
今天有個(gè)項(xiàng)目需要用到百度地圖，一般我們?cè)谝苿?dòng)端使用百度地圖，都是直接通過這樣的方式，直接引入百度地圖的jsApi。
這種方法的原理，就是直接給全局widow對(duì)象添加一個(gè)BMap對(duì)象，從而可以使我們?cè)谝呀?jīng)加載api的頁(yè)面的任何地方，使用百度地圖的api。但是單單通過引入的方法，對(duì)于使用單文件組件的vue+webpack開發(fā)的項(xiàng)目，顯然是不夠的。于是，通過網(wǎng)上查資料。這里找到了兩種方法。
直接引入script標(biāo)簽第一種方法是通過直接引入的方法，當(dāng)然除了引入script標(biāo)簽還不夠，要想在vue文件中使用bmap對(duì)象，還需要在webpack的配置文件中，設(shè)置外部擴(kuò)展(externals屬性)
//webpack.dev.conf.js
externals: {
"BaiduMap": "BMap"
}
externales屬性來自官方的解釋是:
防止將某些 import 的包(package)打包到 bundle 中，而是在運(yùn)行時(shí)(runtime)再去從外部獲取這些擴(kuò)展依賴(external dependencies)。
webpack文檔也給出了一個(gè)示例：從 CDN 引入 jQuery，而不是把它打包。
index.html
webpack.config.js
externals: {
jquery: "jQuery"
}
import $ from "jquery";
$(".my-element").animate(...);
參考這個(gè)實(shí)例，我們就可以在我們的項(xiàng)目中通過引入js文件的方法，直接使用百度地圖的api。
import BaiduMap from "BaiduMap"
export default {
name: "Index",
.....
mounted() {
var map = new BaiduMap.Map("allmap") // 創(chuàng)建地圖實(shí)例
var point = new BaiduMap.Point(120.343373,31.540212) // 創(chuàng)建中心點(diǎn)坐標(biāo)
var marker = new BaiduMap.Marker(point) // 創(chuàng)建標(biāo)注
map.centerAndZoom(point,15) // 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
map.addOverlay(marker) // 將標(biāo)注添加到地圖中
}
注意這里，實(shí)例化地圖api，最好要在mounted階段進(jìn)行，如果你的dom中采用的是官方的示例如
因?yàn)橹挥性趍ounted的階段，dom才會(huì)生成并掛載。
通過模塊化引入的方法實(shí)際上百度地圖官方去年已經(jīng)開源了基于jsApi的vue和react的對(duì)應(yīng)開源組件，我們可以直接通過npm安裝，然后使用。
VUE:[https://github.com/Dafrok/vue...]
React:[https://github.com/huiyan-fe/...]
可參考它們?cè)趃ithub上面的文檔進(jìn)行使用。這里只介紹下vue的。
安裝
npm i vue-baidu-map --save
初始化
import Vue from "vue"
import BaiduMap from "vue-baidu-map"
Vue.use(BaiduMap, {
ak: "YOUR_APP_KEY" //這個(gè)地方是官方提供的ak密鑰
})
使用
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/96300.html
摘要：當(dāng)屬性為合法地名字符串時(shí)例外，因?yàn)榘俣鹊貓D會(huì)根據(jù)地名自動(dòng)調(diào)整的值由于百度地圖只有一種加載方式，因此組件及其所有子組件的渲染只能是異步的。 在使用vue做項(xiàng)目的時(shí)候，有用到百度地圖，使用了vue-baidu-map插件，包括拾取位置坐標(biāo)，搜索位置等 1.引入方式 showImg(https://segmentfault.com/img/bVbv0hs?w=835&h=531); 可在ap...
摘要：不建議底圖選擇中存在兩種不同坐標(biāo)體系，如下圖坐標(biāo)存在明顯的偏差，火星坐標(biāo)在采用坐標(biāo)系的地圖上位置偏上彩色中國(guó)天地圖全球衛(wèi)星地圖例如我們使用的類進(jìn)行查找，返回的數(shù)據(jù)都是國(guó)際坐標(biāo)，因此必須進(jìn)行偏差糾正。 ArcGIS for javascript開發(fā)心得 本次實(shí)例中采用ArcGIS for javascript3.24版本，由于版本3與4在API等存在較大區(qū)別，就不一一列舉，詳細(xì)區(qū)別看官方...
摘要：異步加載異步加載指的是為指定加載的回調(diào)函數(shù)，在的主體資源加載完畢之后，將自動(dòng)調(diào)用該回調(diào)函數(shù)。 幾種加載js的方式 同步加載 異步加載 延遲加載 同步加載 用的最多的一種方式，又稱阻塞模式，會(huì)阻止瀏覽器的后續(xù)處理，停止后續(xù)的解析，只有當(dāng)當(dāng)前加載完成，才能進(jìn)行下一步操作。所以默認(rèn)同步執(zhí)行才是安全的。但這樣如果js中有輸出document內(nèi)容、修改dom、重定向等行為，就會(huì)造成頁(yè)面堵塞。...
摘要：實(shí)際中我們可能會(huì)用到不同的地圖，那么就對(duì)應(yīng)到不同坐標(biāo)系的轉(zhuǎn)換，比如說，你有一份的數(shù)據(jù)服務(wù)，你要展現(xiàn)在百度或者高德地圖上，這時(shí)候你就需要轉(zhuǎn)換了。 地圖坐標(biāo)轉(zhuǎn)換 LBS，基于位置的服務(wù)（Location Based Service)，近年來已經(jīng)無(wú)處不在，尤其是我們前端，相信或多或少都有接觸一些地圖API服務(wù)，比如高德、百度啊、谷歌啊~但是用的時(shí)候可能看到下面這些字眼：比如BD09、火星坐標(biāo)...
閱讀 2373·2021-11-18 10:07
閱讀 2330·2021-09-22 15:59
閱讀 3088·2021-08-23 09:42
閱讀 2287·2019-08-30 15:44
閱讀 1201·2019-08-29 15:06
閱讀 2324·2019-08-29 13:27
閱讀 1224·2019-08-29 13:21
閱讀 1423·2019-08-29 13:13
