Vue-Baidu-Map百度地图使用

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

一，获取应用AK

1、进入百度地图开放平台：百度地图开放平台 | 百度地图API SDK | 地图开发

2、注册账号

3、进行开发者认证

4、创建应用

5、获取应用AK

二、使用 Vue-Baidu-Map插件

Vue Baidu Map (dafrok.github.io)

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>复制

样例：

<div class="map" :style="{width:(mapWidth)+'px'}">
          <baidu-map class="baiduMap" ref="bmap"
            :center="bdCenter" :zoom="bdZoom"
            :scroll-wheel-zoom="true"
            :dragging="bdscrollWheelZoom"
            :auto-resize="true"
            @ready="handleMapReady"
            @moving="syncCenterAndZoom"
            @moveend="syncCenterAndZoom"
            @zoomend="syncCenterAndZoom">
            <bm-marker
              :position="bdCenter"
              :dragging="true"
              @click="infoWindowOpen"
              :animation="bdAnimation">
              <!-- <bm-label
                :labelStyle="bdLabelStyle"
                :content="bdContent"
                :offset="bdOffset"/> -->
                <bm-info-window
                  :show="bmInfoWindow"
                  @close="infoWindowClose"
                  @open="infoWindowOpen">
                 <p>办公地址：123</p>
                 <p>联系方式：123</p>
                 <p>电子邮箱：123</p>
                </bm-info-window>
            </bm-marker>
            <bm-navigation :anchor="bdAnchorRight" />
            <!-- <bm-map-type
              :map-types="bdBmmapTypes"
              :anchor="bdTypesBnchor" /> -->
            <bm-geolocation
              :anchor="bdBottomBnchor"
              :showAddressBar="true"
              :autoLocation="true" />
            <!-- <bm-scale :anchor="bdAnchorRight"></bm-scale> -->
          </baidu-map>
        </div>复制

<script>
export default{
  data() {
    return {
      bdCenter: { lng: 118.437543, lat: 31.361521 },
      bdZoom: 10, //缩放等级设置
      bdContent:'123',
      bdLabelStyle: {
        color: 'black',
        borderRadius:'5px',
        borderColor: '#ccc',
        fontSize : '12px',
        height:'30px',
        padding: '10px',
        fontFamily:'苹方'
      },
      bdOffset: {width: -35, height: 30},
      bdscrollWheelZoom:true, //鼠标缩放
      bdDragging:true, //可拖拽
      bdAnchorRight:'BMAP_ANCHOR_TOP_RIGHT', //缩放
      bdBmmapTypes:['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP'], //查看地图类型添加
      bdTypesBnchor:"BMAP_ANCHOR_TOP_LEFT",
      bdBottomBnchor:"BMAP_ANCHOR_BOTTOM_RIGHT",
      bdAnimation:"BMAP_ANIMATION_BOUNCE",
      bmInfoWindow:false,
      mapWidth:document.documentElement.clientWidth/2
    };
  },
  mounted(){
    window.onresize = ()=>{
      this.mapWidth = document.documentElement.clientWidth/2
    }
  },
  methods: {
    handleMapReady({BMap, map}) {
      // console.log(BMap, map)
      // 经度
      this.bdCenter.lng = 118.437543
      // 纬度
      this.bdCenter.lat = 31.361521
      this.bdZoom = 15
      map.panBy(10, 5)
      // this.$nextTick(()=>{
      //   map.centerAndZoom(new BMap.Point("118.437543","31.361521"), 15);
      // })
      map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
    },
    syncCenterAndZoom (e) {
      // const {lng, lat} = e.target.getCenter()
      this.bdCenter.lng = 118.437543
      this.bdCenter.lat = 31.361521
      this.bdZoom = e.target.getZoom()
    },
     infoWindowClose () {
      this.bmInfoWindow = false
    },
    infoWindowOpen () {
      this.bmInfoWindow = true
    }
  },
};
</script>复制