前端框架Vue(9)——百度地圖使用
百度地圖JavaScript API是一套由JavaScript語言編寫的應用程式介面,可幫助您在網站中構建功能豐富、互動性強的地圖應用,支援PC端和移動端基於瀏覽器的地圖應用開發,且支援HTML5特性的地圖開發。
該套API免費對外開放。自v1.5版本起,您需先申請金鑰(ak)才可使用,介面無使用次數限制。
文章說是欄目是前端框架Vue結合百度地圖,這邊還是主講一下如何引入地圖,以及部分 API 的使用。
1、申請金鑰
百度地圖的使用需要一個專屬的金鑰(ak)作為路徑:
<script src='http://api.map.baidu.com/api?v=2.0&ak=你的金鑰&callback=init' ></script>
按步驟完成,並且啟用就能獲得一個金鑰了,這樣我們就可以開始引入地圖了。
先來看效果圖:
整體專案是用Vue做的,百度地圖是其中的一個功能模組,這邊瞭解一下如何將地圖引入到Vue專案中:
1、首先我用的是vue-cli腳手架,這是目錄結構:
現在在 index.html 中引入script:
script src='http://api.map.baidu.com/api?v=2.0&ak=你的金鑰&callback=init'></script>
解釋一下:v = 2.0是版本,ak 則是申請到的金鑰,callback 回撥初始化地圖。
2、給定容器,呼叫 API 繪圖
<template>
<!--地圖容器-->
<div id="XSDFXPage" class="XSDFXPage"></div>
</template>
<script>
export default {
name:'',
data () {
return {
}
},
mounted() {
// 百度地圖API功能
// 建立Map例項
var map = new BMap.Map("XSDFXPage",{enableMapClick:true});
// 初始化地圖,設定中心點座標和地圖級別
map.centerAndZoom(new BMap.Point(116.4035,39.915), 11);
// 新增地圖型別控制元件
map.addControl(new BMap.MapTypeControl());
// 設定地圖顯示的城市 此項是必須設定的
map.setCurrentCity("杭州");
// 開啟滑鼠滾輪縮放
map.enableScrollWheelZoom(true);
// 設定定時器,對地圖進行自動移動
setTimeout(function(){
map.panTo(new BMap.Point(113.262232,23.154345));
}, 2000);
setTimeout(function(){
map.setZoom(14);
},4000);
/************************************************
新增折線
*************************************************/
var pointGZ = new BMap.Point(113.262232,23.154345);
var pointHK = new BMap.Point(110.35,20.02);
setTimeout(function(){
var polyline = new BMap.Polyline([pointGZ,pointHK],{strokeColor:"blue",strokeWeight:5,strokeOpacity:0.5});
map.addOverlay(polyline);
},6000);
/************************************************
新增工具條、比例尺控制元件
*************************************************/
map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT}));
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,type:BMAP_NAVIGATION_CONTROL_SMALL}));
/************************************************
新增自定義控制元件類,放大ZoomControl
*************************************************/
function ZoomControl() {
//預設停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;
this.defaultOffset = new BMap.Size(50,23);
}
//通過JavaScript的prototype屬性繼承於BMap.Control
ZoomControl.prototype = new BMap.Control();
//自定義控制元件必須實現自己的initialize方法,並且將控制元件的DOM元素返回
//在本方法中建立div容器,並將其新增到地圖容器中
ZoomControl.prototype.initialize = function(map) {
//建立一個DOM元素
var div = document.createElement('div');
//新增文字說明
div.appendChild(document.createTextNode('放大兩級'));
//新增樣式
div.style.color = '#40C5CC';
div.style.cursor = 'pointer';
div.style.border = '3px solid gray';
div.style.backgroundColor = '#eee';
//繫結事件,點選觸發
div.onclick = function(e) {
map.setZoom(map.getZoom() + 2);
}
//新增DOM元素到地圖上
map.getContainer().appendChild(div);
//將DOM元素返回
return div;
}
//建立控制元件
var myZoomCtrl = new ZoomControl();
map.addControl(myZoomCtrl)
/************************************************
新增新增城市列表控制元件
*************************************************/
map.addControl(new BMap.CityListControl({
anchor:BMAP_ANCHOR_BOTTOM_RIGHT,
offset:new BMap.Size(130,23)
// 切換城市之間事件
// onChangeBefore: function(){
// alert('before');
// },
// 切換城市之後事件
// onChangeAfter:function(){
// alert('after');
// }
}));
/************************************************
新增新圖示
*************************************************/
//定義新圖示
var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif",new BMap.Size(300,157));
//建立標註
var marker = new BMap.Marker(pointHK,{icon:myIcon});
var marker1 = new BMap.Marker(pointGZ,{icon:myIcon});
//將標註放大地圖上
map.addOverlay(marker);
map.addOverlay(marker1);
//文字提示
var label = new BMap.Label('廣州西站',{offset:new BMap.Size(140,10)});
marker1.setLabel(label);
//新增新圖示的監聽事件
marker1.addEventListener('click',function(){
var p = marker1.getPosition();//獲取位置
alert("點選的位置是:" + p.lng + ',' + p.lat);
})
/************************************************
新增曲線
*************************************************/
var beijingPosition=new BMap.Point(116.432045,39.910683),
hangzhouPosition=new BMap.Point(120.129721,30.314429),
taiwanPosition=new BMap.Point(121.491121,25.127053);
var point = [beijingPosition,hangzhouPosition,taiwanPosition];
var curve = new BMapLib.CurveLine(point, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});//建立弧線
map.addOverlay(curve);//新增到地圖上
curve.enableEditing();//開啟編輯功能
/************************************************
給地圖新增右鍵選單
*************************************************/
var menu = new BMap.ContextMenu();
var txtMenuItem = [
{
text:'放大',
callback:function(){map.zoomIn()}
},
{
text:'縮小',
callback:function(){map.zoomOut()}
}
];
for(var i=0; i < txtMenuItem.length; i++){
menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
}
map.addContextMenu(menu);
}
}
</script>
<style scoped>
html,body,.XSDFXPage{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微軟雅黑";
}
</style>
上面的程式碼是可以直接用的,也完全可以對照著百度地圖給出的文件進行實踐。
將所有的操作放到 mounted 中,保證掛載完成後再去初始化地圖。
這篇文章主要是為了日後自己用到地圖可以直接來查,實在想不出其他寫的目的了。
總結一下:
1、vue 結合百度地圖如何引入。
2、操作暫時寫在 mounted 中。
3、需要申請一個金鑰,並在使用時引入 script 中。
相關推薦
前端框架Vue(9)——百度地圖使用
百度地圖JavaScript API是一套由JavaScript語言編寫的應用程式介面,可幫助您在網站中構建功能豐富、互動性強的地圖應用,支援PC端和移動端基於瀏覽器的地圖應用開發,且支援HTML5特性的地圖開發。 該套API免費對外開放。自v1.5版
前端框架Vue(13)——vue 中如何對公共css、 js 方法進行單檔案統一管理,全域性呼叫
1、前言 最近,為公司開發交付的一個後臺管理系統專案,我使用了 Vue 框架進行開發實踐。 模組化、元件化、工程化的開發體驗非常好。良好的 api,優雅的設計,對於工程師非常友好。 但是由於模組比較多,我對於每個模組分配了不同的
前端框架Vue(12)——如何將 vue-cli 專案打包壓縮(npm run build)後放到伺服器
當我們將 vue 專案完成後,面臨的就是如何將專案進行打包上線,放到伺服器中。我使用的是 vue-cli(simple) 腳手架,所以就講一下如何將專案進行打包,並放到 tomcat 上。 如果是 vue-cli (非 simple 腳手架),這篇
前端框架Vue(2)——Vue-Router 路由跳轉
1、最簡單:html+js全在一個檔案中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>動
前端框架Vue(16)——vue-i18n ,vue專案中如何實現國際化
一、前言 趁著10月的最後一天,來寫一篇關於前端國際化的實踐型部落格。國際化應該都不陌生,就是一個網站、應用可以實現語言的切換。 在這就不談原理,只說說如何實現中英文的切換。做技術的總得先把 demo 做出來嘛。 二、demo 場景需求分析
前端框架Vue(3)—— vue.resource 、axios、ajax 非同步通訊
vue 中如何支援非同步請求 1、vue 支援開發者引入 jquery 使用 $.ajax() 1、首先,在 package.json 中新增 jQuery,然後 npm install "dependencies": { "jquery":
前端框架Vue(14)—— 利用 vue 過渡效果(transition)+定時器 實現輪播圖通用元件
序論: 輪播圖 相信都不會陌生,很多的網站都會有,而且實現的方式也是千變萬化,可以利用封裝好的 UI 庫 (bootstrap), 也可以原生的 JS 進行編寫。但是其中,動畫(transition)和定時器都是必不可少的。本文就是利用 vue
前端框架Vue(5)——Vue+Echarts
Echarts 是資料視覺化中佼佼者!推薦大家可以玩一玩,非常實用! 如果第一次接觸Echarts的同學,這邊有我以前寫過的一篇入門:淺談Echarts3.0 Vue+Echarts 現附上程式碼: <template&g
前端框架Vue(8)——子父元件的傳參通訊
父子間的通訊傳值是 vue 中的一個重要的內容和掌握點。 *vue2.0 推薦使用 vuex,全域性進行狀態管理。(後面再講) 首先講一下遇到的 需求背景: 解釋一下: 元件之間的關係: <div id="app">
Android studio3.0對於百度地圖api開發(2)——百度地圖定位指定地點以及地圖型別的變換
承接上一篇文章寫的,https://blog.csdn.net/qq_41562408/article/details/82794772已經實現了百度地圖的工具準備以及基本的地圖顯示,不過就一個地圖應用來說,只是單純的顯示一種地圖型別以及只是能夠定位到天安門其他地
Android studio3.0對於百度地圖api開發(3)——百度地圖定位當前地點以及地圖覆蓋物簡介
承接上文,上文已經實現了按照緯經度進行地點的定位以及不同地圖型別的切換,https://blog.csdn.net/qq_41562408/article/details/82802082但是就我們普通使用者的需求來說,這遠遠不夠。使用者更希望能夠直接顯示自己的當前位置
Android studio3.0對於百度地圖api開發(4)——百度地圖地圖覆蓋物製作
承接上文未完的繼續介紹,上文內容:https://blog.csdn.net/qq_41562408/article/details/82810484主要實現百度地圖的定位以及對於地圖覆蓋物進行簡單介紹,這篇文章便是對於地圖覆蓋物進行,經過閱讀開發文件,我們會發
Android studio3.0對於百度地圖api開發(6)——百度地圖地圖POI檢索(續)
LatLngBounds bounds=new LatLngBounds.Builder().include(new LatLng(40.048459,116.302072)) .include(new LatLng(40.050675,116.30431
Android studio3.0對於百度地圖api開發(7)——百度地圖地圖導航實現
承接上文https://blog.csdn.net/qq_41562408/article/details/82829938,本次我們來實現百度地圖的導航功能實現。百度地圖的導航功能對於地點的確定我感覺主要是通過緯經度確定地點然後進行導航,其導航模式可分為:步行
Android studio3.0對於百度地圖api開發(8)——百度地圖開發思考
隨著對於百度地圖SDK的不斷深入,對於百度地圖的基本操作以及實現,每一塊功能就像是一個個工具,他們功能不同,又能相互組合,這就為我們開發者提供了一個很好的平臺,在這個平臺,開發人員可以進行根據自己的需求進行組裝。為了更好的交流,相互學了,我也賺點積分吧!O(∩_
vue-cli中使用百度地圖(根據輸入框輸入的內容,獲取詳細地址)
效果圖如下: 1.申請百度地圖金鑰(ak)-- http://lbsyun.baidu.com/index.php?title=jspopular (1)百度地圖開放平臺–開發文件–web開發–JavaScript API–服務介紹–產品簡介–申請金鑰(ak) (2)
vue-baidu-map vue專案中使用百度地圖(搜尋,資訊視窗,獲取地點詳細資訊)
最近做了一個垃圾分類的專案,要求使用百度地圖。主要實現以下幾個功能: 1、點選地圖獲取到經緯度和地點資訊 2、點選地圖實時顯示資訊視窗 3、區域搜尋功能,具體功能就是如下圖 ↓ 兩個api網址,一個vue-baidu-map的api,一個JavaScript的百度
Vue專案實戰引入百度地圖(二)
一、在 http://lbsyun.baidu.com/ 申請 祕鑰 二、在index.html檔案中引入 <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=Fh9X4h
Vue專案實戰引入百度地圖(一)
一、在 http://lbsyun.baidu.com/ 申請 祕鑰 二、在index.html檔案中引入 <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=Fh9X4h
2018秋招前端面試回顧(阿里、百度、網易、迅雷、美團等)
今年秋招對我是個打擊,不過也讓我認清了現實。借用魯迅先生的一句話,真正的勇士敢於直面慘淡的人生,敢於正視失敗的面試。面試失敗不可怕,可怕的是不能吸取教訓。在吸取教訓上我做的不好,不然也不會有些面試問題記不住了。回顧幾次面試失敗經歷,我總結了一下各家公司問的問題,