您好,登錄后才能下訂單哦!
小編給大家分享一下怎么在vue項(xiàng)目中使用百度地圖API,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù),Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件,每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript,以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方,所以越來(lái)越多的前端開發(fā)者使用vue。
網(wǎng)址:http://lbsyun.baidu.com/index.php?title=jspopularGL
我個(gè)人使用2.0足夠了,其實(shí)就是懶,一直用的2.0沒看3.0。但是3.0應(yīng)該也差不多的使用。
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
在我們需求的頁(yè)面組件中添加地圖容器:
<div id="map" class="map"></div>
這里的class用來(lái)定義大小、布局等樣式操作;重要的是id值map。
一般我們會(huì)在組件加載,也就是頁(yè)面渲染時(shí)加載我們的地圖,所以我們可以在mounted階段添加我們的核心代碼:
// 百度地圖API功能 var map = new BMap.Map("map"); // 創(chuàng)建Map實(shí)例 map.centerAndZoom(new BMap.Point(104.07258, 30.550701), 20); // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別 //添加地圖類型控件 map.addControl( new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], }) ); map.setCurrentCity("成都"); // 設(shè)置地圖顯示的城市 此項(xiàng)是必須設(shè)置的 map.enableScrollWheelZoom(true);
這樣就在頁(yè)面顯示出來(lái)了我們的百度地圖,記得css中添加寬高?。?/p>
let point = new BMap.Point(104.07258, 30.550501); // 創(chuàng)建點(diǎn)標(biāo)記 var marker = new BMap.Marker(point); // 在地圖上添加點(diǎn)標(biāo)記 map.addOverlay(marker); // 創(chuàng)建信息窗口 var opts = { width: 200, height: 100, title: "彈窗標(biāo)題", }; var infoWindow = new BMap.InfoWindow( "彈窗內(nèi)容", opts ); // 點(diǎn)標(biāo)記添加點(diǎn)擊事件 marker.addEventListener("click", function () { map.openInfoWindow(infoWindow, point); // 開啟信息窗口 });
//設(shè)置文本標(biāo)記 var opts2 = { position: point, // 指定文本標(biāo)注所在的地理位置 offset: new BMap.Size(30, -30), // 設(shè)置文本偏移量 }; // 創(chuàng)建文本標(biāo)注對(duì)象 var label = new BMap.Label("成都書論技術(shù)有限公司", opts2); // 自定義文本標(biāo)注樣式 label.setStyle({ color: "blue", borderRadius: "5px", borderColor: "#ccc", padding: "10px", fontSize: "16px", height: "50px", lineHeight: "30px", fontFamily: "微軟雅黑", }); map.addOverlay(label);
以上是“怎么在vue項(xiàng)目中使用百度地圖API”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。