第一步，去百度地圖開發者申請密鑰。
1.申請密鑰（百度地圖開放平臺-->開發文檔-->web開發-->JavaScript API-->立即使用-->創建應用）
2.密鑰申請成功后
第二步，在項目的需要模板中引入，具體如下：
項目路徑
其中index.html存放地圖鏈接，代碼如下
在百度地圖開放平臺 服務介紹中 選擇我們所需要的地圖類型 demo演示可查看
選擇我們所需哪種百度地圖的類型：http://lbsyun.baidu.com/index.php?title=jspopular
然后在某模板 例：APP.vue里面實現，代碼如下
<template> <div id="app"> <div id="allmap" ref="allmap"></div> <router-view></router-view> //切記模板中一定要有渲染 </div> </template> <script> export default { name: 'App', methods:{ map(){ let map =new BMap.Map(this.$refs.allmap); // 創建Map實例 map.centerAndZoom(new BMap.Point(114.30, 30.60), 11);// 初始化地圖,設置中心點坐標（經緯度/城市的名稱）和地圖級別 map.addControl(new BMap.MapTypeControl({//添加地圖類型控件 mapTypes:[ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]})); map.setCurrentCity("武漢");// 設置地圖顯示的城市 此項是必須設置的 map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放 //map.setMapStyle({style:'midnight'});//地圖風格 } }, mounted(){ //調用上面個的函數 this.map() } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } /*設置地圖的寬高*/ #allmap{ height: 500px; overflow: hidden; } </style> 在html頁面中使用百度接口步驟也如上面所示
如有不足請諒解！希望給您帶來幫助。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對武林網的支持。如果你想了解更多相關內容請查看下面相關鏈接
新聞熱點
疑難解答
