Vue專案實戰引入百度地圖(一)
阿新 • • 發佈:2019-01-12
一、在 http://lbsyun.baidu.com/ 申請 祕鑰
二、在index.html檔案中引入
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=Fh9X4hT3ygcBMZnlPbRlMG508r0OCqsk"></script>
三、在需要引入的頁面
<div id="allmap" style="height:100%"></div> methods: { ready: function(x, y) { var map = new BMap.Map('allmap')//顯示標籤 var point = new BMap.Point(x, y) map.addControl(new BMap.MapTypeControl()) map.enableScrollWheelZoom(true)//啟用滾輪放大縮小,預設禁用 map.enableContinuousZoom(); //啟用地圖慣性拖拽,預設禁用 map.enableDoubleClickZoom(true) var marker = new BMap.Marker(point) map.addOverlay(marker) map.centerAndZoom(point, 15)// 初始化地圖,設定城市和地圖級別。 map.centerAndZoom(point, 14)// 初始化地圖,設定城市和地圖級別。 }, }, mounted(){ //this.ready(x,y) this.ready(120,30) }