vue-baidu-map文档地址Vue Baidu Map
一：vue下载百度地图插件
npm install vue-baidu-map --save
二:申请百度地图AK密钥
三:引用百度地图
<template><div class="map" ref="map"><!-- 地图实例 --><baidu-map class="bmView" :scroll-wheel-zoom="true" :center="location" :zoom="zoom" @ready="handler" ak="xxx"><!-- 地图显示 --><bm-view style="width: 100%; height:400px; flex: 1"></bm-view><!-- 标记点组件 --><bm-marker :position="{ lng: location.lng, lat: location.lat }"></bm-marker><!-- 搜索控件 --><bm-control><bm-auto-complete v-model="ruleForm.workAddress" :sugStyle="{zIndex: 999999}" @confirm="handleConfirm"><el-input v-model="ruleForm.workAddress" placeholder="请输入地址来直接查找相关位置" style="width:500px"></el-input></bm-auto-complete></bm-control></baidu-map></div></template><script>import {BaiduMap,BmView,BmMarker,BmControl,BmAutoComplete} from "vue-baidu-map";export default {components: {BaiduMap,BmMarker,BmView,BmControl,BmAutoComplete,},data() {return {// 要搜索的关键词BMap: null,// 地图显示的中心坐标location: {lng: 108.3444553,lat: 22.81879829,},// 缩放，15基本上就可以看附近的一些街道了zoom: 15,keyWord: "",}},methods:{handler(BMap) {this.BMap = BMap;},handleConfirm({ item }) {const that = this;let queryString = `${item.value.city}${item.value.district}${item.value.business}`;var myGeo = new BMap.Geocoder();myGeo.getPoint(queryString, function (point) {if (point) {// console.log(point, "point");that.location = point;}});},},}</script>//去除地图水印<style type="text/css">.BMap_cpyCtrl {display: none;}.anchorBL {display: none;}</style>
* 获取后台省、市、区的name,转换成110101数据回显
//省市区回显数据this.addForm.selectedOptions = TextToCode[this.addForm.provinceName][this.addForm.cityName][this.addForm.areaName].code;console.log(this.addForm.selectedOptions ,'回显数据')
