百度地图 – 基础学习(3): 地址关键字模糊查询、出行路线规划

<template>   <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 route-address address-search">         <el-form-item label="开始地址：" prop="routeStartAddress">           <input             type="text"             id="routeStartAddress"             size="20"             placeholder="请输入路线开始地址"         /></el-form-item>          <el-form-item label="结束地址：" prop="routeEndAddress">           <input             type="text"             id="routeEndAddress"             size="20"             placeholder="请输入路线结束地址"           />         </el-form-item>       </el-row>        <el-row class="el-col el-col-24 queryPar-button-wrapper">         <el-form-item class="inlineBlock-formItem" prop="routeStyle">           <el-select placeholder="请选择行程方式" v-model="ruleForm.routeStyle">             <el-option               v-for="(item, index) in routeList"               :key="index"               :label="item.label"               :value="item.value"             ></el-option>           </el-select>         </el-form-item>         <el-button           class="el-button-fun inlineBlock-formItem"           @click.stop="setRouteLine(ruleForm.routeStyle)"           >绘制路线</el-button         >       </el-row>     </el-form>   </el-row> </template>

<script> const BMap = window.BMap;  export default {   name: "mapSearchPlace",   props: {     mapInstance: {       type: Object,       required: true,       default: () => {         return {};       }     }   },   data() {     return {       ruleForm: {         routeStartAddress: "",         routeEndAddress: "",         routeStyle: "drivingRoute" // 默认驾车       },       routeList: [         {           label: "驾车",           value: "drivingRoute"         },         {           label: "公交",           value: "transitRoute"         },         {           label: "步行",           value: "walkingRoute"         }         // {         //   label: "骑行",         //   value: "ridingRoute"         // }       ],       routeStyleObj: {         drivingRoute: null, // 驾车         transitRoute: null, // 公交         walkingRoute: null // 步行         // ridingRoute: null // 骑行       },       routeStartAddress: null,// 路线开始地址       routeEndAddress: null// 路线结束地址     };   },   mounted() {     // 添加搜索自动完成对象     this.addAutocomplete();     // 添加路线规划方式     this.addRouteStyle();   },   methods: {     // 添加搜索自动完成对象     addAutocomplete() {       this.routeStartAddress = this.customMethods.BMapAutocomplete(         "routeStartAddress",         this.mapInstance,         this.getAutocompleteResult       );        this.routeEndAddress = this.customMethods.BMapAutocomplete(         "routeEndAddress",         this.mapInstance,         this.getAutocompleteResult       );        let that = this;       this.routeStartAddress.addEventListener("onconfirm", async function(e) {         // 鼠标点击下拉列表后的事件         let confirmValue = that.customMethods.BMapOnconfirmJoinValue(e);         that.customMethods.BMapGetPlacePoint(           that.mapInstance,           confirmValue,           function(data) {             that.customMethods.BMapSetMarker(that.mapInstance, data, false);             that.routeStartAddress = data;           }         );       });        this.routeEndAddress.addEventListener("onconfirm", function(e) {         // 鼠标点击下拉列表后的事件         let confirmValue = that.customMethods.BMapOnconfirmJoinValue(e);         that.customMethods.BMapGetPlacePoint(           that.mapInstance,           confirmValue,           function(data) {             that.customMethods.BMapSetMarker(that.mapInstance, data, false);             that.routeEndAddress = data;           }         );       });     },      getAutocompleteResult(val) {       if (val.Hr.length) {         // let poi = val.getPoi(0);         // let str =         //   poi.province + poi.city + poi.district + poi.street + poi.business;         // this.setLocationPlaceIcon(str);       }     },      // 添加交通方式     addRouteStyle() {       // 驾车       this.routeStyleObj.drivingRoute = new BMap.DrivingRoute(         this.mapInstance,         {           renderOptions: {             map: this.mapInstance,             panel: "results",             autoViewport: true           },           onPolylinesSet: this.drivingRoutePolylinesSetCallback         }       );        // 公交       this.routeStyleObj.transitRoute = new BMap.TransitRoute(         this.mapInstance,         {           renderOptions: { map: this.mapInstance, panel: "results" },           onPolylinesSet: this.transitRoutePolylinesSetCallback         }       );       // 步行       this.routeStyleObj.walkingRoute = new BMap.WalkingRoute(         this.mapInstance,         {           renderOptions: { map: this.mapInstance },           onPolylinesSet: this.walkingRoutePolylinesSetCallback         }       );       // 骑行，3.0版本新添加的       // this.routeStyleObj.ridingRoute = new BMap.RidingRoute(this.mapInstance, {       //   renderOptions: { map: this.mapInstance }       // });     },      drivingRoutePolylinesSetCallback(result) {       // 清除原API路线规划显示，便于自定义路线规划显示       this.routeStyleObj.drivingRoute.clearResults();       this.setNewPolyline(result, {         strokeColor: "#438EFF",         strokeStyle: "solid"       });     },      transitRoutePolylinesSetCallback(result) {       this.routeStyleObj.transitRoute.clearResults();       this.setNewPolyline(result, {         strokeColor: "#05cc2f"       });     },      walkingRoutePolylinesSetCallback(result) {       this.routeStyleObj.walkingRoute.clearResults();       this.setNewPolyline(result, {         strokeColor: "#ff2806",         strokeStyle: "solid"       });     },      // 设置新路线折线     setNewPolyline(       result,       {         strokeColor = "#438EFF",         strokeWeight = 6,         strokeOpacity = 0.8,         strokeStyle = "solid"       }     ) {       var points = [];       result[0].Gr.map(function(item) {         points.push(new BMap.Point(item.lng, item.lat));       });       var polyline = new BMap.Polyline(points, {         strokeColor: strokeColor,         strokeWeight: strokeWeight,         strokeOpacity: strokeOpacity,         strokeStyle: strokeStyle       }); // 创建折线       this.mapInstance.addOverlay(polyline); // 添加折线     },      // 绘制路线     setRouteLine(routeStyle) {       if (this.routeStartAddress && this.routeEndAddress) {         this.mapInstance.clearOverlays(); // 绘制路线时，清除上一次旧有路线         this.routeStyleObj[routeStyle].search(           // 路线绘制，2.0API支持关键字(地址)，经纬坐标两种方式的查询(注：可以用坐标的话，尽量坐标；关键字查询经常会定位不准，跑东大西洋、西印度洋(靠澳洲)等情况)           this.routeStartAddress,           this.routeEndAddress         );       }     }   } }; </script>