vue使用百度地图 Vue Baidu Map

1、安装

$ npm install vue-baidu-map --save 

2、main.js引入

import Vue from 'vue'

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {

  ak: '百度地图开发者平台申请的密钥'

})

3、使用

<template>

        <baidu-map class="bm-view"

        :center="center"   //中心

        :zoom="zoom" //缩放等级

        :scroll-wheel-zoom='true'  //允许滚轮缩放

        >

                 <!-- 定位控件 -->

                <bm-geolocation

                        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"  //控件的位置

                         :showAddressBar="true"  //定位信息面板

                         :autoLocation="true"

                         :locationIcon="{url: require('../assets/logo.png'), size: {width: 46, height: 46},opts: {imageSize: {width: 46, height: 46}, }}"  //自定义定位中心点的Icon样式

                         @locationSuccess='locationSuccess'   //定位成功后调用的方法 返回值有 point, AddressComponent, marker  可拿到当前位置信息

                  </bm-geolocation>

       </baidu-map>

</template>

<script>

export default {

      data () {

            return {

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

                     zoom: 15，

             }

       }

}

</script>

<style>

.bm-view {

    width: 100%; height: 300px;

}

 </style>

4、基本地图已经出来，后续其他控件及功能待更新，详细请阅读官方文档