vue - 百度地图 vue-baidu-map

1. 安装

$ npm install vue-baidu-map --save

1. 局部注册 按需引用 注意样式要设置高度

<template>
  <baidu-map class="bm-view" ak="YOUR_APP_KEY" :center="center" :zoom="zoom">
  </baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  components: {
    BaiduMap
  }
}
</script>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

3.自定义功能

//html
              <!-- 地图控件 -->
                <baidu-map class="bm-view" :ak="baiduKey" @moveend="changeCenter" @zoomend="changeZoom" :scroll-wheel-zoom="true" :center="{ lat: map.lat, lng: map.lng }" :zoom="map.zoom">
                    <!--缩放控件-->
                    <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
                    <!-- 搜索控件 -->
                    <bm-local-search @markersset="searchLocation" :panel="false" :keyword="keyword" :selectFirstResult="true" :auto-viewport="true"></bm-local-search>
                    <bm-marker @dragend="getLocationPoint" :position="marker" :dragging="true" :zIndex="10000"></bm-marker>
                </baidu-map>

//data
           map: {
                lng: '',
                lat: '',
                zoom: 13,
            },
            marker: {
                lng: '',
                lat: '',
            },
            center: {
                lng: '',
                lat: '',
            },
            keyword: '',
            searchList: [],

//methods
      //地图中心点
        changeCenter(e) {
            this.map = {
                lng: e.target.getCenter()['lng'],
                lat: e.target.getCenter()['lat'],
                zoom: e.target.getZoom(),
            };
        },
        //地图层级改变
        changeZoom(e) {
            this.map = {
                lng: e.target.getCenter()['lng'],
                lat: e.target.getCenter()['lat'],
                zoom: e.target.getZoom(),
            };
        },
        //地图搜索取点列表
        searchLocation(e) {
            this.searchList = [];
            this.searchList = e;
            if (this.searchList.length > 0) {
                //移动标记点,移动到地图中心点
                //设置标记点
                this.marker = {
                    lat: this.map.lat,
                    lng: this.map.lng,
                };
            }
        },
        //地图取点
        getLocationPoint(e) {
            //移动标记点
            this.marker = {
                lng: e.point['lng'],
                lat: e.point['lat'],
            };
        },