vue vue-baidu-map百度地图(详细地址搜索框,获取经纬度)以及获取后台数据回显

小白兔12345678

已于 2022-05-16 17:54:34 修改

阅读量2.3k

点赞数

分类专栏： vue 前端文章标签： vue.js javascript 前端

于 2022-05-13 17:17:13 首次发布

本文链接：https://blog.csdn.net/m0_58373910/article/details/124755809

版权

前端同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

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 ,'回显数据')