vue实现百度地图（一）【2】实现检索功能

IT技术玩家 lv.1

发布时间：2023-08-23 21:14:21 499

相关标签：

根据上一篇博客代码，继续:mounted钩子函数内的内容就省略了

<template>
  <div >
    <div id="allmap">
      <div id="map"</div>
    </div>
    <div id="r-result" style="">
      <el-input placeholder="请输入内容"  @keyup.enter.native="searchAddr" v-model="positionValue" class="input-with-select">
        <el-button slot="append" icon="iconfont icon-chaxun" class="searchBtn" @click="searchAddr"></el-button>
      </el-input>
    </div>
  </div>
</template>
<script>
  export default {
    name: "baiduMap",
    data(){
      return {
        positionValue: '',
        map: '',  //地图
      }
    },
    mounted() {},
    methods: {
      /**
       * 查询地点事件
      */
      searchAddr() {
        let _this = this;
        var local = new BMap.LocalSearch(this.map, {
          renderOptions:{map: this.map}
        });
        local.search(this.positionValue);
        setTimeout(function(){
          _this.map.setZoom(12);
        }, 1000);  //2秒后放大到14级
      },
    }
  }
</script>
<style>
  #allmap {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
</style>

说明：最近项目比较忙，暂时没更新，等不忙了，会陆续更新添加电子围栏，经纬度存数据库，判断点是否在电子围栏中。。。。等等文章

文章来源： https://blog.51cto.com/u_13002884/5894559

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。