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

梦里梦外; 2024-04-19 13:12 70阅读 0赞

根据上一篇博客代码，继续: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>

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

发表评论取消回复

表情：

评论列表（有 0 条评论，70人围观）

还没有评论，来说两句吧...

相关阅读

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

据上一篇博客代码，继续:mounted钩子函数内的内容就省略了 <template> <div > <div id="allmap"...

梦里梦外;/ 2024年04月19日 13:12/ 0 赞/ 71 阅读

相关百度地图电子围栏功能的实现

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMy

ゝ一纸荒年。/ 2023年02月24日 11:28/ 0 赞/ 73 阅读

相关 java实现定位功能_[转贴]JAVA 百度地图SDK地图学习——实现定位功能

之前已经完成了百度地图SDK和百度定位SDK的配置。实现百度定位的功能，最好仔细看看官方的文档，看了好几次才有点明白。我初步想实现如下功能：点击findme按钮，进入新

本是古典何须时尚/ 2022年11月03日 10:56/ 0 赞/ 903 阅读

相关仿百度地图街景实现

使用过百度地图的同学知道，它有个街景功能，可以看到许多地方的实景。这里就其街景内容的实现，进行下学习。 > 在[百度地图SDK的官网][SDK]上可以看到，百度对开发者提供了

悠悠/ 2022年09月22日 03:49/ 0 赞/ 309 阅读

相关百度地图检索以及路径规划

> 代码地址如下： > [http://www.demodashi.com/demo/11030.html][http_www.demodashi.com_demo_110

墨蓝/ 2022年05月31日 14:17/ 0 赞/ 294 阅读

相关 vue 百度地图调用

vue百度地图插件 [https://dafrok.github.io/vue-baidu-map/\/zh/search/local-search][https_dafro

￡神魔★判官ぃ/ 2022年04月23日 08:18/ 0 赞/ 361 阅读

相关 HTML实现百度地图定位及导航功能

首先使用百度地图需要在百度地图平台申请一个密钥，网址：[http://lbsyun.baidu.com/apiconsole/key][http_lbsyun.baidu.co

梦里梦外;/ 2022年02月13日 08:17/ 1 赞/ 1339 阅读

相关 vue引入百度地图

1.创建一个vue项目输入指令 npm install vue-baidu-map –-save 2.在index.html 里面引入 <script type

雨点打透心脏的1/2处/ 2021年11月27日 07:14/ 0 赞/ 410 阅读

相关 Android开发百度地图应用——实现定位功能

本随笔是为了记录课程中的一个安卓开发作业：做一个安卓端的地图应用，要求可以实现地图定位功能，输入一个地址后，可以在地图上定位到这个地址并给出经纬度（使用 Android Stu

墨蓝/ 2021年10月01日 03:00/ 0 赞/ 678 阅读

相关百度地图API实现地图应用

企业官网上需要用到地图应用，这里对百度地图API的使用做点笔记，好记性不如烂笔头。实现地图应用的流程如下： 1、获取密钥；教程网址 [https://jingyan.ba

灰太狼/ 2021年09月18日 10:22/ 0 赞/ 834 阅读