1.安装iview

　　$npm install iview --save

　　在main.js中引入

　　

　　这样就算安装完成了！

2.安装baidu-map插件

　　$ npm install baudu-map --save

　　安装成功之后就可以再页面上显示了，我做的是效果是这样的，一边移动一边获取点的坐标，点击也可以，给大家看看效果图：

　　　

　　最后贴上代码，　

　　　　<template> 　　　　　　<div> 　　　　　　　　<div class="baiduMap"> 　　　　　　　　　　<i-form :model="centerStr" :label-width="100"> 　　　　　　　　　　　　<Form-item label="经度"> 　　　　　　　　　　　　　　<i-input :value.sync="centerStr.lng"></i-input> 　　　　　　　　　　　　</Form-item> 　　　　　　　　　　　　<Form-item label="纬度"> 　　　　　　　　　　　　　　<i-input :value.sync="centerStr.lat"></i-input> 　　　　　　　　　　　　</Form-item> 　　　　　　　　　　　　<i-button type="primary">提交</i-button> 　　　　　　　　　　</i-form>
　　　　　　　　　　<baidu-map 　　　　　　　　　　　　class="bm-view" 　　　　　　　　　　　　ak="你的百度地图ak" 　　　　　　　　　　　　center="广州市" 　　　　　　　　　　　　:zoom="12" 　　　　　　　　　　　　:scroll-wheel-zoom="true" 　　　　　　　　　　　　@click="getClickInfo" 　　　　　　　　　　　　@moving="syncCenterAndZoom" 　　　　　　　　　　　　@moveend="syncCenterAndZoom" 　　　　　　　　　　　　@zoomend="syncCenterAndZoom"> 　　　　　　　　　　　　　　<bm-view style="width: 100%; height:500px;"></bm-view> 　　　　　　　　　　　　　　<bm-marker 　　　　　　　　　　　　　　　　:position="{ lng: centerStr.lng, lat: centerStr.lat }" 　　　　　　　　　　　　　　　　:dragging="true" 　　　　　　　　　　　　　　　　animation="BMAP_ANIMATION_BOUNCE"> 　　　　　　　　　　　　　　</bm-marker> 　　　　　　　　　　　　　　<bm-control :offset="{ width: '10px', height: '10px' }"> 　　　　　　　　　　　　　　　　<bm-auto-complete v-model="keyword" :sugStyle="{ zIndex: 999999 }"> 　　　　　　　　　　　　　　　　　　<input 　　　　　　　　　　　　　　　　　　　　type="text" 　　　　　　　　　　　　　　　　　　　　placeholder="请输入搜索关键字" 　　　　　　　　　　　　　　　　　　　　class="serachinput"/> 　　　　　　　　　　　　　　　　</bm-auto-complete> 　　　　　　　　　　　　　　</bm-control> 　　　　　　　　　　　　　　<bm-local-search 　　　　　　　　　　　　　　　:keyword="keyword" 　　　　　　　　　　　　　　　:auto-viewport="true" 　　　　　　　　　　　　　　　style="width:0px;height:0px;overflow: hidden;" 　　　　　　　　　　　　　　></bm-local-search> 　　　　　　　　　　</baidu-map> 　　　　　　　　</div> 　　　　　　</div> 　　　　</template>   　　　　 　　　　<script> 　　　　　　//地图组件---按需引入 　　　　　　import { 　　　　　　　　BaiduMap, 　　　　　　　　BmControl, 　　　　　　　　BmView, 　　　　　　　　BmAutoComplete, 　　　　　　　　BmLocalSearch, 　　　　　　　　BmMarker 　　　　　　} from "vue-baidu-map";   　　　　　　export default { 　　　　　　　　components: { 　　　　　　　　　　BaiduMap, 　　　　　　　　　　BmControl, 　　　　　　　　　　BmView, 　　　　　　　　　　BmAutoComplete, 　　　　　　　　　　BmLocalSearch, 　　　　　　　　　　BmMarker 　　　　　　　　}, 　　　　　　　　data: function() { 　　　　　　　　　　return { 　　　　　　　　　　　　showMapComponent: this.value, 　　　　　　　　　　　　keyword: "", 　　　　　　　　　　　　mapStyle: { 　　　　　　　　　　　　　　width: "100%", 　　　　　　　　　　　　　　height: this.mapHeight + "px" 　　　　　　　　　　　　}, 　　　　　　　　　　　　centerStr: { 　　　　　　　　　　　　　　lng: "", 　　　　　　　　　　　　　　lat: "" 　　　　　　　　　　　　} 　　　　　　　　　　}; 　　　　　　　　}, 　　　　　　　　watch: { 　　　　　　　　　　value: function(currentValue) { 　　　　　　　　　　　　this.showMapComponent = currentValue; 　　　　　　　　　　　　if (currentValue) { 　　　　　　　　　　　　　　this.keyword = ""; 　　　　　　　　　　　　} 　　　　　　　　　　} 　　　　　　　　}, 　　　　　　　　methods: { 　　　　　　　　　　getClickInfo(e) { 　　　　　　　　　　this.centerStr.lng = e.point.lng; 　　　　　　　　　　this.centerStr.lat = e.point.lat; 　　　　　　　　}, 　　　　　　　　syncCenterAndZoom(e) { 　　　　　　　　　　const { lng, lat } = e.target.getCenter(); 　　　　　　　　　　this.centerStr.lng = lng; 　　　　　　　　　　this.centerStr.lat = lat; 　　　　　　　　　　this.zoom = e.target.getZoom(); 　　　　　　　　} 　　　　　　} 　　　　}; 　　</script> 　 　　<style scoped> 　　　　.head { 　　　　　　margin-left: 200px; 　　　　　　width: 100px; 　　　　} 　　　　.baiduMap { 　　　　　　width: 80%; 　　　　　　height: 800px; 　　　　　　margin: 0 auto; 　　　　　　overflow: hidden; 　　　　} 　　　　.ivu-form-item { 　　　　　　display: inline-block; 　　　　　　width: 40%; 　　　　} 　　　　.bm-view > div { 　　　　　　width: 100%; 　　　　　　height: 700px !important; 　　　　} 　　　　.serachinput { 　　　　　　width: 300px; 　　　　　　box-sizing: border-box; 　　　　　　padding: 9px; 　　　　　　border: 1px solid #dddee1; 　　　　　　line-height: 20px; 　　　　　　font-size: 16px; 　　　　　　height: 38px; 　　　　　　color: #333; 　　　　　　position: relative; 　　　　　　border-radius: 4px; 　　　　　　-webkit-box-shadow: #666 0px 0px 10px; 　　　　　　-moz-box-shadow: #666 0px 0px 10px; 　　　　　　box-shadow: #666 0px 0px 10px; 　　　　} 　　</style> 　　 　　写的不足的地方，望大佬指教！