1- 安装yarn add vue-baidu-map-v3
2-引入 注册 main.js 文件
import BaiduMap from "vue-baidu-map-v3";Vue.use(BaiduMap, {ak: "XA5932348T9SXZZZtZZZVtRNWexL11111111111111JSOd2e27AAHzVAAAuSt4bP999Swpmf7",});
3- public下的index.html 文件
4- 解决 跨域问题 （目前项目中使用的是 第一种方案，开发环境中可以，线上环境的话需要后台配合改下 代理配置）
第一种方案：4.1 src下的api 新建 baidu.js 文件
baidu.js 文件内容复制
export default {init: function () {const AK = "XA593VRNWexLOde7AAHzVAuStbPwpmf7"; //你的AKconst BMap_URL ="https://api./api?v=2.0&ak=" +AK +"&s=1&callback=onBMapCallback";return new Promise((resolve, reject) => {// 如果已加载直接返回if (typeof BMap !== "undefined") {resolve(BMap);return true;}// 百度地图异步加载回调处理window.onBMapCallback = function () {resolve(BMap);};let getCurrentCityName = function () {return new Promise(function (resolve, reject) {let myCity = new BMap.LocalCity();myCity.get(function (result) {resolve(result.name);});});};// 插入script脚本let scriptNode = document.createElement("script");scriptNode.setAttribute(type, "text/javascript");scriptNode.setAttribute("src", BMap_URL);document.body.appendChild(scriptNode);});},};
4.2 vue.config.js文件 代理配置
代理的内容 复制
publicPath: "/",devServer: {proxy: {// // 本地代理环境配置"/baidu": {target: "https://api.",ws: true,changOrigin: true, //允许跨域pathRewrite: {"^/baidu": "", //请求的时候使用这个/baidu 就可以},},}, //指向开发环境 API 服务器},
4.3 在请求拦截器中 拦截 含有 ‘ak’ 的字段
拦截器的内容 复制
// 百度地图 如果url纯在ak字段，修改baseUrlif (config.url.indexOf("ak") > -1) {config.baseURL = "";}
解决跨域的第二种方案（使用 jsonp）
1- 安装依赖包 npm install vue-jsonp --save
2- main.js 中引入
3-vue页面中使用：
template
<template><div><a-button type="primary" @click="openMap"><a-icon type="environment" />定位</a-button><a-modaltitle="新增定位":visible="visible"okText="保存"@cancel="cancel"@ok="submitItem"><!-- <div class="searcharea"><a-input-search placeholder="输入地点" @search="onSearchArea" /></div> --><!-- ak="33B192o1jPaqOHASGGAIkoMuwi8W76j3" --><baidu-mapclass="map":center="center":zoom="zoom"@ready="handler":scroll-wheel-zoom="true"@click="clickEvent"ak="XA593VRNWexLOde7AAHzVAuStbPwpmf7"><!-- 地图控件位置 --><bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation><!-- 百度搜索 --><bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list><!-- 定位位置 --><bm-geolocationanchor="BMAP_ANCHOR_BOTTOM_RIGHT":showAddressBar="true":autoLocation="true"@locationSuccess="getLoctionSuccess"></bm-geolocation><!-- 地图容器 --><bm-view:style="{width: '100%',height: this.clientHeight + 'px',flex: 1,marginBottom: '-30px',}"></bm-view><bm-marker:position="{ lng: center.lng, lat: center.lat }":dragging="true"animation="BMAP_ANIMATION_BOUNCE"></bm-marker><!-- 百度搜索框 ===================start--><bm-control :offset="{ width: '10px', height: '10px' }"><bm-auto-completev-model="areaaddress":sugStyle="{ zIndex: -999999 }"style="display: none"><inputtype="text"placeholder="请输入搜索关键字"class="serachinput"v-model="areaaddress"@blur="changeclick"/></bm-auto-complete></bm-control><bm-local-search:keyword="areaaddress":auto-viewport="true"style="width: 0px; height: 0px; overflow: hidden; display: none"></bm-local-search><!-- 百度搜索框 =============================end --></baidu-map><div class="demo-input-suffix"><p>经度：</p><p>{{locData.longitude }}</p><p>纬度：</p><p>{{locData.latitude }}</p><p>位置：</p><p>{{areaaddress }}</p></div></a-modal></div></template>
script
<script>import myBMap from "../../api/baidu.js";import {BaiduMap,BmNavigation,BmView,BmGeolocation,BmCityList,BmControl,BmLocalSearch,BmAutoComplete,BmMarker,} from "vue-baidu-map";export default {name: "",components: {BaiduMap,BmNavigation,BmView,BmGeolocation,BmCityList,BmControl,BmLocalSearch,BmAutoComplete,BmMarker,},data() {return {show: true,center: {lng: 116.404, lat: 39.915 },creating: true,zoom: 12,mapVisible: false,code: "", // 地区编码areaaddress: "", //地区省市县镇locData: {longitude: "",latitude: "",address: "",},visible: false,clientHeight: "400", // 屏幕高度iconUrl: require("../../assets/image/dingwe.png"),ak: "XA593VRNWexLOde7AAHzVAuStbPwpmf7",};},mounted() {},methods: {openMap() {this.visible = !this.visible;},//点击地图监听clickEvent(e) {// console.log(e, "点击");map.clearOverlays();let Icon_0 = new BMap.Icon(this.iconUrl, new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36),});var myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat), {icon: Icon_0,});map.addOverlay(myMarker);//用所定位的经纬度查找所在地省市街道等信息var point = new BMap.Point(e.point.lng, e.point.lat);// 获取逆解析方法实例var gc = new BMap.Geocoder();let _this = this;gc.getLocation(point, function (rs) {var addComp = rs.addressComponents;// console.log(rs, "点击详细地址信息"); //地址信息_this.locData.address = rs.address;});this.locData.longitude = e.point.lng; // 经度this.locData.latitude = e.point.lat; // 纬度// 通过经纬度获得 地区编码code 使用代理 /baidu 开头myBMap.init().then((BMap) => {this.$http.get("/baidu/reverse_geocoding/v3/?ak=XA593VRNWexLOde7AAHzVAuStbPwpmf7&output=json&coordtype=wgs84ll&extensions_town=true&location=" +this.locData.latitude +"," +this.locData.longitude).then((res) => {// console.log(res, "编码code");this.code = res.result.addressComponent.town_code;this.areaaddress =res.result.addressComponent.province +res.result.addressComponent.city +res.result.addressComponent.district +res.result.addressComponent.town;this.locData.longitude = res.result.location.lng; // 经度this.locData.latitude = res.result.location.lat; // 纬度});});},/**定位成功回调*/getLoctionSuccess(point, AddressComponent, marker) {map.clearOverlays();let Icon_0 = new BMap.Icon(this.iconUrl, new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36),});var myMarker = new BMap.Marker(new BMap.Point(point.point.lng, point.point.lat),{icon: Icon_0 });map.addOverlay(myMarker);this.locData.longitude = point.point.lng;this.locData.latitude = point.point.lat;},// 搜索详细定位地址获得经纬度再获得编码code =============================startchangeclick() {console.log("经纬度");let that = this;// 通过区域名获得 经纬度 精确度不准 偏差较大 使用代理 /baidu 开头myBMap.init().then((BMap) => {this.$http.get("/baidu/geocoding/v3/?&output=json&ak=XA593VRNWexLOde7AAHzVAuStbPwpmf7&address=" +that.areaaddress).then((res) => {console.log(res, "地区经纬度");var lng = res.result.location.lng;var lat = res.result.location.lat;lng = parseFloat(lng) - 0.008774687519; // 解决误差大问题lat = parseFloat(lat) - 0.00374531687912;that.locData.longitude = lng; // 经度that.locData.latitude = lat; // 纬度that.$http.get("/baidu/reverse_geocoding/v3/?ak=XA593VRNWexLOde7AAHzVAuStbPwpmf7&output=json&coordtype=wgs84ll&extensions_town=true&location=" +lat +"," +lng).then((res) => {that.code = res.result.addressComponent.town_code;});});});},// ===================================================end// 获得当前位置handler({BMap, map }) {const hide = this.$message.loading("正在获取城市信息");let _this = this; // 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；// 获取自动定位方法var geolocation = new BMap.Geolocation();// 获取自动定位获取的坐标信息geolocation.getCurrentPosition(function (r) {_this.center = {lng: r.longitude, lat: r.latitude }; // 设置center属性值_this.autoLocationPoint = {lng: r.longitude, lat: r.latitude }; // 自定义覆盖物_this.initLocation = true;setTimeout(hide, 1000);},{enableHighAccuracy: true });window.map = map;},submitItem() {if (this.areaaddress != "") {this.$emit("reload", this.areaaddress, this.code, this.locData);this.visible = false;this.areaaddress = "";this.code = "";this.locData.longitude = "";this.locData.latitude = "";} else {this.$message.error("请点击地图选择位置");}},cancel() {this.creating = true;this.visible = false;this.areaaddress = "";this.code = "";this.locData.longitude = "";this.locData.latitude = "";},},};</script>
style
<style scoped lang="less">/deep/ .ant-modal {width: 90% !important;margin: 0 auto;}.bm-view {width: 100%;height: 400px;}.demo-input-suffix {margin-top: 40px;z-index: 999;display: flex;justify-content: flex-start;align-items: center;p {margin-left: 15px;}}.searcharea {margin: 0px auto 20px;width: 40%;}.serachinput {width: 800px;height: 38px;box-sizing: border-box;padding: 9px;border: 1px solid #dddee1;line-height: 20px;font-size: 16px;color: #333;position: relative;border-radius: 4px;-webkit-box-shadow: #666 0px 0px 10px;-moz-box-shadow: #666 0px 0px 10px;box-shadow: #666 0px 0px 10px;display: none;}/deep/ .citylist_popup_main .city_content_top {height: 40px;}/deep/ #selCityWd {height: 24px;}</style>
