vue baidu map 百度地图 搜索功能 画点

1. 项目框架Vue.js制作项目
2. 使用 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;
}*/