vue-baidu-map使用

项目里用到一个地图初始定位，项目q前端框架是vue，所以选择使用vue-bai-map,记录一波

1.注册百度Ak

地址 https://lbsyun.baidu.com/apiconsole/key#/home，控制台=》运用管理=》我的运用=》创建运用生成一个AK

2.安装插件

npm install vue-biadu-map --save 在展示的页面写入，局部注册组件，需要的功能组件找到对应的模块下引入即可

<template>

    <div>

         <BaiduMap class="bm-view" ak="你的AK" :center="center" :zoom="zoom" @ready="handler"

         :scroll-wheel-zoom="true">

         <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

         <bm-maker :position="center"></bm-maker>

         </BaiduMap>

    </div>

</template>

<script>

import BaiduMap from 'vue-baidu-map/components/map/Map'

import BmNavigation from 'vue-baidu-map/components/controls/Navigation'

import BmMaker from 'vue-baidu-map/components/overlays/Marker'

export default {

    components: {

        BaiduMap,

        BmNavigation,

        BmMaker

    },

    data() {

        return {

            center: {lng: 0, lat: 0},

            zoom: 3,

            }

    },

    methods: {

        handler ({BMap, map}) {

           const that = this;

      var geolocation = new BMap.Geolocation();

      geolocation.getCurrentPosition(function(r) {

        if (this.getStatus() == BMAP_STATUS_SUCCESS) {

          that.center.lng = r.longitude;

          that.center.lat = r.latitude;

          console.log(that.center);

        } else {

          alert("failed" + this.getStatus());

        }

      })

    }

}

}

</script>

<style lang="scss" scoped>

.bm-view {

  width: 100%;

  height: 300px;

}

</style>