- 项目框架
Vue.js
制作项目 - 使用
Vue Baidu Map
中的简单功能
npm安装组件
npm install vue-baidu-map --save
<template>
<a-modal
title="地图预览"
width="1200px"
@ok="handleOk"
cancelText="关闭"
:closable="false"
:visible="visible"
:maskClosable="false"
@close="handleCancel"
@cancel="handleCancel"
:dialog-style="{ top: '20px' }"
:confirmLoading="confirmLoading"
>
<a-spin :spinning="loading">
<a-input-search
allowClear
enter-button
id="suggestId"
class="inputClass"
@search="onSearch"
v-model="searchValue"
placeholder="请输入地址"
></a-input-search>
<a-button type="primary" @click="toggle" style="position: absolute; top: 10px; z-index: 33; left: 330px">
{{ falg ? '开始绘制' : '停止绘制' }}
</a-button>
<baidu-map
class="map"
:zoom="15"
@ready="handleReady"
@click="getClickInfo"
:scroll-wheel-zoom="true"
:center="{ lng: 116.104, lat: 39.115 }"
>
</baidu-map>
</a-spin>
</a-modal>
</template>
export default {
data() {
return {
map: null,
BMap: null,
point: null,
falg: true,
visible: false,
loading: false,
searchValue: undefined,
options: [],
}
},
methods: {
toggle() {
this.falg = !this.falg
},
handleReady({ BMap, map }) {
this.BMap = BMap
this.map = map
this.map.setDefaultCursor('default')
let searchInput = new this.BMap.Autocomplete({ input: 'suggestId', location: this.map })
searchInput.addEventListener('onconfirm', (e) => {
let _value = e.item.value
let myValue = _value.province + _value.city + _value.district + _value.street + _value.business
this.searchValue = myValue
this.onSearch(true)
})
},
getClickInfo(e) {
if (e.type == 'onclick') {
if (!this.falg) {
this.map.clearOverlays()
this.map.addOverlay(new this.BMap.Marker(e.point))
}
}
},
show() {
this.visible = true
},
handleOk() {
this.visible = false
},
handleCancel() {
this.visible = false
},
onSearch(value) {
if (value) {
this.loading= true
let local = new this.BMap.LocalSearch(this.map, {
onSearchComplete: () => {
let pp = local.getResults().getPoi(0).point
this.map.centerAndZoom(pp, 18)
this.loading= false
},
})
local.search(this.searchValue)
}
},
},
}
.inputClass {
width: 300px;
position: absolute;
top: 10px;
left: 15px;
z-index: 10;
}
.BMap_cpyCtrl {
display: none !important;
}
.anchorBL {
display: none !important;
}
.map {
width: 100%;
height: 72vh;
}
/*
### 注意:这个是在index.html中设置的,用来显示智能搜索功能
.tangram-suggestion-main {
z-index: 9999999;
}*/