一、 前往百度地图API平台获取ak
二、安装vue-baidu-map (这里推荐npm安装)
三、引入vue-baidu-map.js，(我这里是全局引入的)。在main.js中导入
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: 填入ak值
});
简单描述一下实现的功能 1、在地图上点击标注，会把对应的位置显示在搜索框中 2、搜索输入地址后，点击搜索，地图跳转到相应位置 3、地图/混合 可以切换地图模式 4、右边可以选择街、市、省、国 进行位置切换
<!--center 显示中心位置 lng经度 lat纬度 zoom 视图的缩放比例 -->
<!- scroll-wheel-zoom是否允许用鼠标滚轮缩放 -->
<baidu-map class="map" :center="{lng: 121.4095, lat: 31.1796}" :zoom="15" :scroll-wheel-zoom="true" @click="getPoint">
<!--地图类型，两种：一种是路线一种是绿的那种-->
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
<!--是否显示标注-->
<div v-if="locationFlag" >
<bm-marker :position="postionMap" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" />
</div>
<!--搜索功能-->
<!--display: none样式很关键，因为下面默认会有地址提示信息很长，很烦，这样搜索会很舒服，-->
<bm-local-search :keyword="keyword" :auto-viewport="true" zoom="12.8" style="display: none"></bm-local-search>
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
</baidu-map>
js代码
searchLocal(){
this.keyword = this.keywordReady
},
getPoint(e){ //点击地图获取一些信息，
console.log('e',e)
this.show = true;
this.postionMap.lng = e.point.lng; //通过 e.point.lng获取经度
this.postionMap.lat = e.point.lat; //通过 e.point.lat获取纬度
this.add.jd = e.point.lng;
this.add.wd = e.point.lat;
this.zoom = e.target.getZoom()
let geocoder= new BMap.Geocoder(); //创建地址解析器的实例
geocoder.getLocation(e.point,rs=>{
if(!this.locationFlag){ //地图标注为false时，不让位置在搜索框中显示
return true
}
this.keywordReady = rs.address;
//地址描述(string)
// console.log(rs.address); //这里打印可以看到详细地址信息
// console.log(rs.addressComponents);//结构化的地址描述(object)
// console.log(rs.addressComponents.province); //省
// console.log(rs.addressComponents.city); //城市
// console.log(rs.addressComponents.district); //区县
// console.log(rs.addressComponents.street); //街道
// console.log(rs.addressComponents.streetNumber); //门牌号
// console.log(rs.surroundingPois); //附近的POI点(array)
// console.log(rs.business); //商圈字段，代表此点所属的商圈(string)
});
},
//出现标注地址
getFlag(){
this.locationFlag=true
},
//取消标注
cancelFlag(){
this.locationFlag=false
},
data中的代码
data() {
return {
keywordReady:"" , //在输入框中输入的值
add:{
siteName:'',
site:'',
jd:'',
wd:'',
desce:'',
type:'',
jgName:'',
jgNum:'',
},
postionMap:{ //地图坐标
lng: 120.211486,
lat: 30.256576
},
keyword: '', //搜索框关键词
css样式代码
css地图样式
.map{
width: 100%;
height: 400px;
}
欢迎大神们指点，蟹蟹大家~
