Vue中使用百度地图，使用插件Vue-Baidu-Map

项目开发需要使用的地图，通过列表选择地方，在地图中显示对应的位置信息。这里使用百度地图

一，获取应用AK

1、进入百度地图开放平台：https://lbsyun.baidu.com/

2、注册账号

3、进行开发者认证

4、创建应用

5、获取应用AK

 

二、使用 Vue-Baidu-Map插件

1、安装插件

//yarn
yarn add vue-baidu-map

//npm
npm i vue-baidu-map

 

2、全局注册使用

在 main.js 中进行全局引用

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
   ak:'输入你的前面申请的应用AK' 
})

页面调用

<template>
    <baidu-map class="bm-view" >      
    </baidu-map>
</template>

<style>
    /* 必须设定高度 */
  .bm-view{
    width: 100%;
    height: 300px; 
  }
</style>

 

3、局部注册使用

<template>
    <baidu-map class="bm-view" ak="申请的应用AK">      
    </baidu-map>
</template>


<script>
import BaiduMap from 'vue-baidu-map'

export default {
  components: {
    BaiduMap
  }
}

</script>

<style>
    /* 必须设定高度 */
  .bm-view{
    width: 100%;
    height: 300px; 
  }
</style>

 

三、常用属性

 

    <!-- 
      center:地图定位, 可使用如“广州市海珠区”的地区字符串，也可以使用经纬度对象如 {lng: 116.404, lat: 39.915} 
      zoom:缩放等级 
      scroll-wheel-zoom:允许鼠标滚轮缩放
      dragging:允许拖拽
    -->
    <baidu-map 
    class="map" 
    center="北京" 
    zoom="15"
    scroll-wheel-zoom="true" 
    dragging="true"
     >      
  </baidu-map>

 

四、常用控件

1、缩放

<baidu-map class="map" center="北京">
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
</baidu-map>

 

2、地图类型

<baidu-map class="map" center="北京">
    <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
 </baidu-map>

 

3、定位

<baidu-map class="map" center="北京">
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
</baidu-map>

 

4、比例尺

<baidu-map class="map" center="北京">
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
</baidu-map>

 

5、检索

<baidu-map>
    <bm-view class="map"></bm-view>
    <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>
 </baidu-map>

<script>
export default {
  data () {
    return {
      location: '北京',
      keyword: '百度' //keyword 可以是字符串，也可以是字符串数组
    }
  }
}
</script>

 

Vue-Baidu-Map：中文文档地址