vue页面嵌套百度地图

最新推荐文章于 2024-07-25 10:08:22 发布

J练习生

最新推荐文章于 2024-07-25 10:08:22 发布

阅读量497

点赞数

分类专栏： vue 文章标签： vue.js 百度 javascript

本文链接：https://blog.csdn.net/m0_51458935/article/details/127430713

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

样式图片
在这里插入图片描述

html代码

		<div>
          <a-input :maxLength="500" id="city" placeholder="请输入"/>
        </div>
      <div>
        <baidu-map
      		class="bm-view"
      		:zoom="mapZoom"
      		:scroll-wheel-zoom="true"
      		@ready="onReady"
    		></baidu-map>
    	</div>

export default {
  data () {
	return{
	mapZoom: 15
	}
}

js代码

// 地图初始化回调
    onReady({ BMap, map }) {
      const _this = this
      this.BMap = BMap
      this.map = map
      var point = new BMap.Point(116.404, 39.925)
      map.centerAndZoom(point, 13)
      // 创建标注
      var marker = new BMap.Marker(point)
      // 将标注添加到地图中
      map.addOverlay(marker)
      var Aco = new BMap.Autocomplete({
      // 输入框的id
      input: "city",
      location: this.map,
    })
    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(value);
      console.log(value);
    },
  }