vue專案使用和引用百度地圖的操作

一介青煙小生發表於2020-10-30
Vue地圖

vue使用百度地圖

先安裝包

npm i vue-baidu-map --save

在main.js引入

import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap, {
      ak: '你的百度地圖金鑰ak'
})

沒有金鑰ak的可以去百度地圖網站申請

http://lbsyun.baidu.com/apiconsole/key#/home

如下圖

在這裡插入圖片描述

然後再index.html入口檔案新增引用

<script type="text/javascript" src="//api.map.baidu.com/api?v=1.1&ak=你的AK"></script>

然後建立vue單頁新增

<template>
  <div>
    <div id="map" style="width:1200px;height:500px;"></div>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data () {
    return {
    };
  },

  created() {},

  methods: {},

  computed: {},

  mounted(){
        // 百度地圖API功能
    var map = new BMap.Map("map");    // 建立Map例項
    map.centerAndZoom(new BMap.Point(113.370171,23.129587), 15);  // 初始化地圖,設定中心點座標和地圖級別
    //新增地圖型別控制元件
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));
    map.setCurrentCity("廣州");          // 設定地圖顯示的城市 此項是必須設定的
    map.enableScrollWheelZoom(true);     //開啟滑鼠滾輪縮放

  },

  watch: {}
}

</script>
<style lang='stylus' scoped>

</style>
```

相關文章