百度地图 – 基础学习(5): 地图事件、逆/地址解析

<template>   <div class="el-col el-col-24">     <div class="el-col el-col-24 font-size16">       <div class="el-col el-col-24">         <div class="color-b2aead">当前鼠标点击位置地址：</div>         <div class="color-568dfd">           <span v-if="currentAddress !== null && currentAddress !== 'getLost'">             {{               currentAddress.length                 ? currentAddress                 : "艾玛，你娃掉海里了，快捞起来！"             }}           </span>           <span v-if="currentAddress === 'getLost'"             >年轻人你已经迷失了自我，快回去吧！</span           >         </div>       </div>       <div class="el-col el-col-24">         <div class="color-b2aead">当前鼠标点击位置经纬度为：</div>         <div class="color-568dfd">           <span style="margin-right: 10px">             {{               currentPoint                 ? currentPoint.lng > 0                   ? "东经：" + Math.abs(currentPoint.lng)                   : "西经：" + Math.abs(currentPoint.lng)                 : ""             }}           </span>           <span>             {{               currentPoint                 ? currentPoint.lat > 0                   ? "北纬：" + Math.abs(currentPoint.lat)                   : "南纬：" + Math.abs(currentPoint.lat)                 : ""             }}           </span>         </div>       </div>     </div>      <div class="el-col el-col-24 font-size16">       <div class="el-col el-col-24">         <div class="color-b2aead">地图中心点变更为：</div>         <div class="color-568dfd">           <span v-if="centerAddress !== null && centerAddress !== 'getLost'">             {{               centerAddress.length                 ? centerAddress                 : "艾玛，你娃掉海里了，快捞起来！"             }}           </span>           <span v-if="centerAddress === 'getLost'"             >年轻人你已经迷失了自我，快回去吧！</span           >         </div>       </div>       <div class="el-col el-col-24">         <div class="color-b2aead">当前地图中心位置经纬度为：</div>         <div class="color-568dfd">           <span style="margin-right: 10px">             {{               centerPoint                 ? centerPoint.lng > 0                   ? "东经：" + Math.abs(centerPoint.lng)                   : "西经：" + Math.abs(centerPoint.lng)                 : ""             }}           </span>           <span>             {{               centerPoint                 ? centerPoint.lat > 0                   ? "北纬：" + Math.abs(centerPoint.lat)                   : "南纬：" + Math.abs(centerPoint.lat)                 : ""             }}           </span>         </div>       </div>     </div>      <el-row class="el-col el-col-24 queryPar-form-wrapper">       <el-form         class="el__form-queryPar"         ref="ruleForm"         label-position="left"         label-width="75px"         :model="ruleForm"         :inline="true"       >         <el-row class="el-col el-col-24 address-search">           <el-form-item class="inlineBlock-formItem" prop="parameterAddress">             <input               type="text"               id="parameterAddress"               size="20"               placeholder="请输入定位地址关键字"             />           </el-form-item>           <el-button             class="el-button-fun inlineBlock-formItem"             @click.stop="positioningAddress()"             >地址定位</el-button           >         </el-row>          <el-row class="el-col el-col-24 queryPar-button-wrapper"></el-row>       </el-form>     </el-row>   </div> </template>

<script> const BMap = window.BMap;  export default {   name: "mapEventAndAddressResolution",   props: {     mapInstance: {       type: Object,       required: true,       default: () => {         return {};       }     }   },   data() {     return {       ruleForm: {         parameterAddress: ""       },       currentAddress: null, // 鼠标点击位置地址       currentPoint: null, // 鼠标点击位置经纬度坐标       centerAddress: null, // 地图中心位置地址       centerPoint: null // 地图中心经纬度坐标     };   },   mounted() {     this.addEventListener();     this.addAutocomplete();   },   methods: {     // 给地图实例添加事件监听     addEventListener() {       let that = this;       function click(type) {         that.resolutionAddress("point", "click", type.point);       }        function dragend() {         that.resolutionAddress(           "point",           "dragend",           that.mapInstance.getCenter()         );       }        // 点击事件       this.mapInstance.addEventListener("click", click);       // 拖动事件       this.mapInstance.addEventListener("dragend", dragend);        this.$once("hook:beforeDestroy", () => {         this.mapInstance.removeEventListener("click", click);         this.mapInstance.removeEventListener("dragend", dragend);       });     },      addAutocomplete() {       this.parameterAddress = this.customMethods.BMapAutocomplete(         "parameterAddress",         this.mapInstance       );        let that = this;       this.parameterAddress.addEventListener("onconfirm", function(e) {         //鼠标点击下拉列表后的事件         that.confirmValue = that.customMethods.BMapOnconfirmJoinValue(e);         that.parameterAddress.setInputValue(that.confirmValue);       });     },      // 地址定位     positioningAddress() {       let that = this;       this.customMethods.BMapGetPlacePoint(         this.mapInstance,         this.confirmValue,         function(data) {           that.customMethods.BMapSetMarker(that.mapInstance, data, true);         }       );     },      // 地址解析(地址-> 坐标；坐标->地址)     // type: 解析类别；event: 事件类别；par: 需要解析的参数     resolutionAddress(type, event, par) {       let that = this;       let myGeo = new BMap.Geocoder();       if (type === "address") {         myGeo.getPoint(           par,           function(point) {             if (point) {               console.log(point);               that.newCenter = point;               // return point;               // that.mapInstance.centerAndZoom(point, 16);               // that.mapInstance.addOverlay(new BMap.Marker(point));             } else {               alert("您当前位置已经超出地球范围，地址无法解析!");             }           },           that.currentCity         );       } else {         that.mapInstance.clearOverlays(); // 地图中心或点击位置发生变动后，新添加标注前，删除旧有标注         if (Math.abs(par.lat) < 74) {           myGeo.getLocation(par, function(result) {             if (result) {               if (event === "click") {                 that.currentAddress = result.address;                 that.currentPoint = result.point;                 that.centerAddress = null;                 that.centerPoint = null;               } else {                 that.centerAddress = result.address;                 that.centerPoint = result.point;                 that.currentAddress = null;                 that.currentPoint = null;                 //北纬和南纬，分别用“N”和“S”表示；东经和西经，分别用“E”和“W”表示。北纬为正数，南纬为负数；东经为正数，西经为负数。               }               that.confirmValue = result.address;               that.parameterAddress.setInputValue("");               that.customMethods.BMapSetMarker(                 that.mapInstance,                 result.point,                 true               );             } else {               alert("您当前位置已经超出地球范围，无法进行定位!");             }           });         } else {           if (event === "click") {             that.currentAddress = "getLost";             that.currentPoint = null;             that.centerAddress = null;             that.centerPoint = null;           } else {             that.centerAddress = "getLost";             that.centerPoint = null;             that.currentAddress = null;             that.currentPoint = null;             //北纬和南纬，分别用“N”和“S”表示；东经和西经，分别用“E”和“W”表示。北纬为正数，南纬为负数；东经为正数，西经为负数。           }         }       }     }   } }; </script>