Vue中使用百度地图Vue Baidu Map(vue-baidu-map)
最近负责的一个vue项目中需要调用百度地图api做标记打点的需求,记录一下:vue-baidu-map 官方地址一.插件的安装1.npm 安装$ npm install vue-baidu-map --save2.js 引入index.html 中<script src="https://unpkg.com/vue-baidu-map"></s...
最近负责的一个vue项目中需要调用百度地图api做标记打点的需求,记录一下:
一.插件的安装
1.npm 安装
$ npm install vue-baidu-map --save
2.js 引入
index.html 中
<script src="https://unpkg.com/vue-baidu-map"></script>
二.使用
1.全局注册(一次性引入百度地图组件的所有组件)
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'YOUR_APP_KEY'
})
<template>
<baidu-map class="bm-view">
</baidu-map>
</template>
<style>
.bm-view {
width: 100%;
height: 300px;
}
</style>
2.局部注册(按需引入组件)
局部注册的 BaiduMap
组件必须声明 ak
属性。 所有的独立组件均存放在 vue-baidu-map/components
文件夹下,按需引用即可。 由于未编译的 ES 模块不能在大多数浏览器中直接运行,如果引入组件时发生运行时错误,请检查 webpack 的 loader 配置,确认 include
和 exclude
选项命中了组件库。
3.CND全局注册
<script>
Vue.use(VueBaiduMap.default, {
ak: 'YOUR_APP_KEY'
})
</script>
我项目中所需功能比较简单,所以我选择了第二种方法局部引入了以下几种组件:
mport BaiduMap from 'vue-baidu-map/components/map/Map.vue';
import BmView from 'vue-baidu-map/components/map/MapView'; //地图视图
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch'; //搜索
import BmMarker from 'vue-baidu-map/components/overlays/Marker'; //点标注
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'; //标注弹窗
实现的代码如下:
<template>
<div>
<div class="mb-10">
<label>地区:<input v-model="location"/></label>
<label> 关键词:<input v-model="keyword"/></label>
<label> 经度:<input v-model="markerPo.lat"/></label>
<label> 纬度:<input v-model="markerPo.lng"/></label>
</div>
<baidu-map
ak="ocjtpCpd3HusX9VUmkfc49P9jxRV5Vch"
:scroll-wheel-zoom="true"
@rightclick="clickBmap"
>
<!--地图视图-->
<bm-view class="map"></bm-view>
<!--显示更多-->
<div class="more_panel">
<span :class="{ down: isShowPanel }" @click.stop="showPanel">
<span>{{ isShowPanel ? "隐藏" : "显示" }}</span
>搜索列表<i class="el-icon-d-arrow-right"></i>
</span>
</div>
<!--搜索-->
<bm-local-search
:keyword="keyword"
:panel="isShowPanel"
:auto-viewport="true"
:location="location"
@searchcomplete="searchcomplete"
></bm-local-search>
<!--点标注-->
<bm-marker
:position="markerPo"
:dragging="true"
:title="storeName"
:zIndex="999999999"
@click="infoWindowOpen"
:icon="{ url: markerIcon, size: { width: 34, height: 34 } }"
@dragend="dragend"
>
<bm-info-window
:show="isShowInfo"
@close="infoWindowClose"
@open="infoWindowOpen"
>{{ address }}</bm-info-window
>
</bm-marker>
</baidu-map>
</div>
</template>
<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmView from "vue-baidu-map/components/map/MapView"; //地图视图
import BmLocalSearch from "vue-baidu-map/components/search/LocalSearch"; //搜索
import BmMarker from "vue-baidu-map/components/overlays/Marker"; //点标注
import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow"; //标注弹窗
export default {
components: {
BaiduMap,
BmView,
BmLocalSearch,
BmMarker,
BmInfoWindow,
},
data() {
return {
storeName: "",
center: {
//经纬度
lng: 39.9,
lat: 116.3,
},
zoom: 3, //地图展示级别
location: "北京",
keyword: "北京",
markerPo: {
lng: 39.9,
lat: 116.3,
},
isShowPanel: true,
isShowInfo: false,
markerIcon: "", //标注图片
address: "",
};
},
methods: {
clickBmap(val) {
//右击鼠标放标注
this.markerPo = val.point;
},
showPanel() {
//点击标注出现弹框
this.isShowPanel = !this.isShowPanel;
},
infoWindowClose() {
//弹框关闭
this.isShowInfo = false;
},
infoWindowOpen() {
//弹框打开
this.isShowInfo = true;
},
dragend(val) {
//标注拖拽完成获取坐标信息
this.markerPo = val.point;
let geocoder = new BMap.Geocoder(); //创建地址解析器的实例
geocoder.getLocation(val.point, (rs) => {
this.address = rs.address;
});
},
searchcomplete(arr) {
this.isShowPanel = true;
},
},
};
</script>
<style lang="scss" scoped>
.map {
width: 100%;
height: 500px;
}
.more_panel {
text-align: center;
font-size: 12px;
color: #2878ff;
padding-top: 10px;
span {
cursor: pointer;
i {
transform: rotate(90deg);
}
}
span.down {
i {
transform: rotate(-90deg);
}
}
}
</style>
其中获取点坐标的信息是废了一点时间,因为只拿到经纬度,想要获取具体街道信息就需要使用
let geocoder= new BMap.Geocoder(); //创建地址解析器的实例
geocoder.getLocation(val.point,rs=>{
console.log(val.address)
})
更多推荐
所有评论(0)