Vue项目使用百度地图展示或搜索地点(vue-baidu-map)
-
安装插件:
yarn add vue-baidu-map
-
在
main.js
全局中引入:import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: 'your_app_key' // 百度地图秘钥 })
-
使用
3.1 在地图上展示标注地点
百度地图坐标拾取工具<div class="m-map-container"> <div class="m-map"> <baidu-map class="bmView" :scroll-wheel-zoom="false" // 禁止鼠标滚轮缩放 :dragging="false" // 禁止拖拽 :double-click-zoom="false" // 禁止鼠标双击缩放 :map-click="false" // 禁用鼠标点击查看详情 :center="location" :zoom="zoom"> <bm-marker :position="location" animation="BMAP_ANIMATION_BOUNCE"></bm-marker> <bm-view style="width: 100%; height: 480px; flex: 1;border-radius: 5px;"></bm-view> </baidu-map> </div> </div> data () { return { location: { lng: 102.68906, lat: 25.049784 }, // 指定地点的经纬度 zoom: 20 // 地图缩放比例 } } .m-map-container { width: 1200px; text-align: center; margin: 0 auto; background: #fff; .m-map { margin: 0 auto; width: 800px; padding-top: 60px; } } // 移除左下角百度地图版权 /deep/ div.BMap_cpyCtrl.BMap_noprint.anchorBL { display: none; } // 移除左下角百度地图logo /deep/ div.anchorBL { display: none; } // 悬浮地图时不展示小手 /deep/ .BMap_mask { cursor: default; }
3.2 在地图上搜索地点,并可通过鼠标点击获取其经纬度及详细地址信息
<template> <a-modal title="地址坐标" :width="980" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel" :footer="null" > <a-spin :spinning="confirmLoading"> <a-form :form="form"> <a-row :gutter="16"> <a-col :lg="12" :md="12"> <a-form-item> <a-input-search placeholder="请输入地址" enter-button="查询" @search="handleSearch" v-decorator="['address',{initialValue: defaultAddress}]" /> </a-form-item> </a-col> <a-col :lg="12" :md="12"> <a-form-item label="坐标" :labelCol="labelCol" :wrapper-col="wrapperCol"> <a-input v-decorator="['address_coordinates']"/> </a-form-item> </a-col> </a-row> <div class="map"> <!-- 地图点击事件getLocationPoint,获取地点详细信息、经纬度 --> <!-- scroll-wheel-zoom:是否可以用鼠标滚轮控制地图缩放,zoom:视图比例 --> <!-- dragging:是否可以用鼠标进行拖拽 --> <!-- double-click-zoom:是否可以用鼠标双击控制地图缩放 --> <!-- map-click:是否可以用鼠标点击查看详情 --> <baidu-map class="bmView" :scroll-wheel-zoom="true" :zoom="zoom" @click="getLocationPoint" > <!-- 右上角比例尺控件 --> <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale> <!-- 右上角缩放控件 --> <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> <!-- 左上角地图类型控件 --> <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type> <!-- 右下角缩略图 --> <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map> <!-- 右下角加入定位控件 --> <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation> <!-- 左上角加入城市列表 --> <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list> <!-- 右上角加入全景控件 --> <!-- <bm-panorama anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-panorama> --> <bm-view class="u-bm-view"></bm-view> <bm-local-search :keyword="addressKeyword" :auto-viewport="true" class="u-search"></bm-local-search> </baidu-map> </div> <span class="m-span"> <a-form-item style="margin-top: 20px;margin-bottom: 10px;"> <a-button class="u-submit" type="primary" htmlType="submit" @click="handleSubmit">确定</a-button> <a-button class="u-cancal" @click="handleCancel">取消</a-button> </a-form-item> </span> </a-form> </a-spin> </a-modal> </template> <script> export default { data () { return { labelCol: { lg: { span: 4 }, md: { span: 4 } }, wrapperCol: { lg: { span: 20 }, md: { span: 20 } }, form: this.$form.createForm(this), addParams: { mod: 'add' }, defaultAddress: '', visible: false, confirmLoading: false, zoom: 12, addressKeyword: '' } }, methods: { getLocationPoint (e) { console.log('e:', e) console.log(e.point.lng + ',' + e.point.lat) /* 可以通过在.eslintrc.js中加入: globals: { BMap: true }, // 防止eslint报错:'BMap' is not defined. 或者直接使用:// eslint-disable-next-line no-undef */ const geoCoder = new BMap.Geocoder() // 创建地址解析器的实例 /* 利用坐标获取地址的详细信息 */ geoCoder.getLocation(e.point, res => { console.log('res:', res) this.form.setFieldsValue({ // 地址和经纬度 address: res.address, address_coordinates: res.point.lng + ',' + res.point.lat }) }) }, handleSearch (value) { console.log(value) this.addressKeyword = value }, check (value) { if (!this.defaultAddress) { this.defaultAddress = value } else { this.form.setFieldsValue({ address: value }) } this.addressKeyword = value this.visible = true }, handleSubmit (e) { e.preventDefault() const { form: { validateFields } } = this this.confirmLoading = true validateFields((errors, values) => { if (!errors) { this.visible = false this.confirmLoading = false console.log('values:', values) this.$emit('ok', values) } else { this.confirmLoading = false } }) }, handleCancel () { this.visible = false } } } </script> <style lang="less" scoped> // 移除左下角百度地图版权 /deep/ div.BMap_cpyCtrl.BMap_noprint.anchorBL{ display: none; } // 移除左下角百度地图logo /deep/ div.anchorBL{ display: none; } .u-bm-view{ width: 100%; height: 500px; flex: 1; } .m-span{ text-align: center; } .u-submit{ margin-right: 30px; width: 100px; } .u-cancal{ margin-left: 30px; width: 100px; } /deep/ .BMap_CityListCtrl{ margin-top: 30px; div div { .city_content_top{ height: 36px; .cur_city_info{ position: absolute; bottom: 0px; height: 24px; } #city_ctrl_form{ .sel_city_input{ height: 24px; } } } } } .u-search{ display:none; } </style>
原文连接:https://blog.csdn.net/Dandrose/article/details/112623864