2019-08-05
百度地图在vue中的简单使用
效果如图：
(使用前先申请密钥）
1.首先就是引入百度地图了，方式有两种，
第一种：脚手架安装 npm install vue-baidu-map --save
第二种：使用标签引入例如
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
2.到你需要使用的组件中单独引用，或者你全局引用也可以
import {BaiduMap, BmControl, BmView,BmAutoComplete, BmLocalSearch, BmMarker}from"vue-baidu-map";
components: {
Tinymce,
uploadImage,
BaiduMap,
BmControl,
BmView,
BmAutoComplete,
BmLocalSearch,
BmMarker
},
html部分：
<baidu-map
v-bind:style="mapStyle"
class="bm-view"
ak="你的密钥"
:center="center"
:zoom="zoom"
:scroll-wheel-zoom="true"
@click="getClickInfo"
@moving="syncCenterAndZoom"
@moveend="syncCenterAndZoom"
@zoomend="syncCenterAndZoom"
>
<bm-view style="width: 100%; height:300px;"></bm-view>
<bm-marker
:position="{lng: center.lng, lat: center.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 slot="footer" style="margin-top: 0px;">
<Button @click="cancel" type="ghost" style="width: 60px;height: 36px;">取消</Button>
<Button type="primary" style="width: 60px;height: 36px;" @click="confirm">确定</Button>
</div>
js部分
变量：
mapStyle: {
width: "100%",
height: this.mapHeight + "px"
},
center: { lng: 110.843714, lat: 35.418283 },
zoom: 15,
keyword: ""
数据监测：
watch: {
value: function(currentValue) {
this.showMapComponent = currentValue;
if (currentValue) {
this.keyword = "";
}
}
},
props: {
value: Boolean,
mapHeight: {
type: Number,
default: 300
}
},
函数部分
/***
* 地图点击事件。
*/
getClickInfo(e) {
this.center.lng = e.point.lng;
this.center.lat = e.point.lat;
var geoc = new BMap.Geocoder();
var pt = e.point;
geoc.getLocation(pt, function(rs) {
// console.log(rs)
var address = "";
if (rs.surroundingPois.length != 0) {
address = rs.address + rs.surroundingPois[0].title;
} else {
address = rs.address;
}
document.getElementById("address").value = address;
// console.log(address)
});
},
syncCenterAndZoom(e) {
const { lng, lat } = e.target.getCenter();
this.center.lng = lng;
this.center.lat = lat;
this.zoom = e.target.getZoom();
},
/***
* 确认
*/
confirm: function() {
this.showMapComponent = false;
this.$emit("map-confirm", this.center);
},
/***
* 取消
*/
cancel: function() {
this.showMapComponent = false;
this.$emit("cancel", this.showMapComponent);
},
