vue结合百度地图api实现地址检索、路线规划等功能

一条爱学习的咸鱼

已于 2022-06-20 22:39:48 修改

阅读量7.2k

点赞数 6

文章标签： vue.js 百度 javascript

于 2022-01-23 02:57:03 首次发布

本文链接：https://blog.csdn.net/weixin_52641692/article/details/122646517

版权

vue+百度地图api

引入百度地图api

在百度地图开发平台申请到自己的开发密匙
在这里插入图片描述

找到项目的根目录index.html位置：
在这里插入图片描述
在项目的根目录下的index.html文件中添加如下代码：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的秘钥"></script>

创建一个div用于地图展示

<template>
  <div>
    <div id="allmap" class="allmap"></div>
  </div>
</template>

初始化创建地图

mounted() {
    //初始化
    // 创建Map实例
    this.map = new BMap.Map("allmap");
    // 初始化地图,设置中心点坐标和地图级别
    this.map.centerAndZoom("成都", this.mapZoom);
    // 设置地图显示的城市 此项是必须设置的
    this.map.setCurrentCity("成都");
    // 启用滚轮放大缩小，默认禁用
    this.map.enableScrollWheelZoom(true);
    // 启用地图惯性拖拽，默认禁用
    this.map.enableContinuousZoom(true);
    // 启用地图拖拽，默认启用
    this.map.enableDragging(true);

    const cityControl = new BMap.CityListControl({
      /* 
  	控件的停靠位置（可选，默认左上角）
  	BMAP_ANCHOR_TOP_RIGHT 右上角
  	BMAP_ANCHOR_BOTTOM_LEFT 左下角
  	BMAP_ANCHOR_BOTTOM_RIGHT 右下角
    */
      anchor: BMAP_ANCHOR_TOP_LEFT,
      // 控件基于停靠位置的偏移量（可选）
      offset: new BMap.Size(10, 5),
    });
    // 将控件添加到地图上
    this.map.addControl(cityControl);
  },

获取用户当前位置

Geolocation ( ) 构造函数，用于返回用户当前的位置，会首先调用浏览器自带的定位接口，如果失败或不支持则调用高精IP定位（需要开通权限，否则调用普通定位）接口，如果用户拒绝授权定位，则无法返回任何定位结果。
具体详细信息可参考百度地图JavaScript API v3.0类参考文档¹
例：

async atten() {
      var address = null;
      //创建Geolocation对象实例
      var geolocation = new BMap.Geolocation();
      //返回用户当前位置
      await geolocation.getCurrentPosition(function(r) {
        //getStatus()用于获取定位完成后的状态码
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          // Geocoder类用于获取用户的地址解析
          var gc = new BMap.Geocoder();
          gc.getLocation(r.point, function(rs) {
          //获取地址信息，设置地址label
            var addComp = rs.addressComponents;
            address =
              addComp.province +
              addComp.city +
              addComp.district +
              addComp.street +
              addComp.streetNumber; //获取地址
            console.log("当前位置"+address);//打印地址
          });
        } else {
          alert("failed" + this.getStatus());
        }
      });
    },

地址检索（定位）

LocalSearch(location: Map | Point | String, opts: LocalSearchOptions)用于位置检索、周边检索和范围检索。 创建一个搜索类实例，其中location表示检索区域，其类型可为地图实例、坐标点或城市名称的字符串。当参数为地图实例时，检索位置由当前地图中心点确定，且搜索结果的标注将自动加载到地图上。
具体详细信息可参考百度地图JavaScript API v3.0类参考文档¹
例：
添加一个用于输入地址信息的输入框：

<div>
      <el-input
        size="mini"
        type="text"
        id="city"
        class="inputCity"
        placeholder="请输入地点"
      >
      </el-input>
</div>

在methods中添加如下方法：

AddressSearch() {
	const _this = this
	// 创建Map实例
	this.map = new BMap.Map('map')
	// 初始化地图,设置中心点坐标和地图级别
	this.map.centerAndZoom(new BMap.Point(104.072242, 30.663711), this.mapZoom)
	// 设置地图显示的城市 此项是必须设置的
	this.map.setCurrentCity('成都')
	//建立一个自动完成的对象
	//Autocomplete是结果提示、自动完成类。
	var Aco = new BMap.Autocomplete({
      // 输入框的id
      input: "city",
      location: this.map,
    })
    Aco.addEventListener("onhighlight", function (e) {
      //鼠标放在下拉列表上的事件
    })
    Aco.addEventListener("onconfirm", function (e) {
      //鼠标点击下拉列表后的事件
      var _value = e.item.value;
      // 拼装的地址信息
      var myValue =
        _value.province +
        _value.city +
        _value.district +
        _value.street +
        _value.business;
      _this.setPlace(myValue);
    })
}
setPlace(value) {
	const _this = this;
	//this.map.clearOverlays(); //清除地图上所有覆盖物
	// 创建一个检索对象
	var local = new BMap.LocalSearch(_this.map, {
		//智能搜索
		onSearchComplete: function () {
			var getpo = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
			_this.map.centerAndZoom(getpo, 18);
			_this.map.addOverlay(new BMap.Marker(getpo)); //添加标注
		},
	});
	local.search(e);
},

效果图：
在这里插入图片描述

路线规划

TransitRoute(location: Map | Point | String, opts: TransitRouteOptions) 创建一个公交导航实例。location表示检索区域，类型可为地图实例、坐标点或城市名称的字符串。当参数为地图实例时，检索位置由当前地图中心点确定；当参数为坐标时，检索位置由该点所在位置确定；当参数为城市名称时，检索会优先在该城市内进行
具体详细信息可参考百度地图JavaScript API v3.0类参考文档¹
例：
添加用于输入起点与终点信息的输入框，以及进行规划功能的按钮

<div class="plan">
      <div>
      	<el-input
        size="mini"
        type="text"
        id="startcity"
        class="inputCity"
        placeholder="请输入出发地"
        v-model="startcity">
      	</el-input>
      	<el-input
        size="mini"
        type="text"
        id="endcity"
        class="inputCity"
        placeholder="请输入目的地"
        v-model="endcity">
     	</el-input>
      </div>
       <el-button @click="searchByStationName1()" class="planBegin"
        ></el-button>
</div>

初始化两个数据，用于储存起点与终点的经纬度

data(){
	return {
      	from: null,
     	 to: null,
	}
}

在methods中添加如下方法：
通过地址检索的方式设立标注点，同时获取到起点和终点的经纬度坐标
地址检索：

// 起点地点坐标获取
    searchByStationName1() {
      const _this = this;
      var startAddrr = document.getElementById("startcity").value; //获得起始地地名
      //通过地址检索的方式设立标注点，同时获取到起点和终点的经纬度坐标
      var localSearch = new BMap.LocalSearch(this.map);
      //设置检索结束后的回调函数。
      localSearch.setSearchCompleteCallback(function (searchResult) {
        var poi = searchResult.getPoi(0); //获得起点经纬度坐标
        if (poi != null) {
          //判断地名是否存在
          _this.from = poi.point;//获得起点经纬度坐标
          //开始检索终点坐标
          _this.searchByStationName2();
        } else {
          alert("请输入正确的地名！");
        }
      });
      localSearch.search(startAddrr);
    },
    // 终点地点坐标获取
    searchByStationName2: function () {
      const _this = this;
      var endAddrr = document.getElementById("endcity").value; //获得目的地地名
      //通过地址检索的方式设立标注点，同时获取到起点和终点的经纬度坐标
      var localSearch = new BMap.LocalSearch(this.map,{
      //检索结束后是否自动调整地图视野
        autoViewport:false,
      });
      //设置检索结束后的回调函数。
      localSearch.setSearchCompleteCallback(function (searchResult) {
        var poi = searchResult.getPoi(0); //获得目的地经纬度坐标
        if (poi != null) {
          //判断目的地是否存在
          _this.to = poi.point;
          //调用公交规划函数
          _this.TransitPlan();
        } else {
          alert("请输入正确的地名！");
        }
      });
      localSearch.search(endAddrr);
    },

//公交规划
    TransitPlan() {
      const self = this;
      var subwaying = new BMap.TransitRoute(this.map, {
      //搜索结果的呈现设置
        renderOptions: {
          map: this.map,
          // 详细方案展示，panel的值为div的id
          panel: document.getElementById("r-result"),
          // 拖动路线
          // enableDragging: true,
          // 是否选择第一个检索结果
          selectFirstResult: true,
          // 检索结束后是否自动调整地图视野
          autoViewport: true,
          //设置时间最少方案优先
          policy:BMAP_TRANSIT_POLICY_LEAST_TIME,
        },
        
        // 检索完成后回调
        onSearchComplete: function (results) {
          if (subwaying.getStatus() != BMAP_STATUS_SUCCESS) {
            return;
          }
          // 获取第一个路线
          var plan = results.getPlan(0);
          // console.log("路线结果",plan);
          // 获取时间
          plan.getDuration(true);
          // 获取距离
          plan.getDistance(true);
        },
      });
      //赋值起点与终点的经纬度
      var start = new BMap.Point(self.from.lng, self.from.lat);
      var end = new BMap.Point(self.to.lng, self.to.lat);  
      subwaying.search(start, end);
      //公交规划结束
    },

效果图：
在这里插入图片描述

修改路线规划中的图标图案

方法如下：

//坐标图案

  var startIcon = new BMap.Icon(
    require('../../../assets/images/坐标.png'),
    new BMap.Size(30, 120),
    { anchor: new BMap.Size(10, 25) }
  )
  var endIcon = new BMap.Icon(
    require('../../../assets/images/坐标.png'),
    new BMap.Size(30, 120),
    { anchor: new BMap.Size(10, 25) }
  )
  //起点终点图案重新设置
  airplaneing.setMarkersSetCallback(function (result) {
    result[0].marker.setOffset(new BMap.Size(0, 40))
    result[0].marker.setIcon(startIcon)
    result[1].marker.setOffset(new BMap.Size(12, 45))
    result[1].marker.setIcon(endIcon)
  })
  //初始化地图
  this.map.centerAndZoom('北京', 14)
  airplaneing.search(point1, point2)

修改提示框等样式

若发现结果提示框等信息的样式出错或消失，需要修改其样式，可以通过按F12进行开发人员调试，在元素列表中找到我们要的元素，然后获取其类名，对类名的进行css属性的修改即可
在这里插入图片描述

<style>
.tangram-suggestion-main {
    top: 100px !important;
    z-index: 999;
}
</style>

需要注意的是，若style中有格式要求，如下图所示

<style lang="less" scoped>

则可能修改类名属性操作无法正常实现效果

百度地图JavaScript API v3.0类参考 ↩︎ ↩︎ ↩︎

一条爱学习的咸鱼

关注

6
点赞
踩
118

收藏

觉得还不错? 一键收藏
7
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫