vue + 百度地图地址搜索并定位

Dear 丶 2022-10-15 13:57 494阅读 0赞

## 1、先上效果图 ##

![在这里插入图片描述][20210525163315669.gif_pic_center]

## 2、实现方法： ##

<el-input v-model="searchKey" clearable placeholder="请输入搜索地址" @keyup.enter.native="mapSearch">
       <el-button slot="append" icon="el-icon-search" @click="mapSearch" />
    </el-input>
    
    
    methods:
    
    init(){ 
    	const map = new BMapGL.Map('map') // 创建地图实例
    	...
    	this.map = map
    }
    
    mapSearch(){ 
          //创建地址解析器实例
          var myGeo = new BMapGL.Geocoder();
          // 将地址解析结果显示在地图上，并调整地图视野
          myGeo.getPoint(this.searchKey, (point)=>{ 
            if(point){ 
              this.map.clearOverlays() // 清空地图上的覆盖物
              this.map.centerAndZoom(point, 12)
              this.map.addOverlay(new BMapGL.Marker(point)) //重新绘制当前位置覆盖物-marker点
              myGeo.getLocation(point, (rs) => { 
                console.log('当前位置详细信息---',rs)
              })
            }else{ 
              // alert('您选择的地址没有解析到结果！');
              this.$message({ 
                type: 'error',
                message: '您输入的地址没有解析到结果！请重新输入'
              })
              this.searchKey = '' // 清空搜索框
            }
          },this.searchKey)
    }

[20210525163315669.gif_pic_center]: /images/20221014/ffed378961394ddd91b980d970b377a4.png

发表评论取消回复

表情：

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

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

相关阅读

相关百度地图自动定位

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding

r囧r小猫/ 2023年07月07日 05:42/ 0 赞/ 4 阅读

相关 vue使用百度地图定位当前城市

申请百度地图浏览器端ak 百度地图开发者平台，创建应用后，会生成免费ak。 vue项目中配置ak 在index.html中添加如下代码： <script

小鱼儿/ 2023年07月04日 06:12/ 0 赞/ 17 阅读

相关 Vue利用百度地图初始化页面定位

Vue利用百度地图初始化页面定位结果展示 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

朱雀/ 2023年06月05日 13:59/ 0 赞/ 313 阅读

相关 vue + 百度地图地址搜索并定位

1、先上效果图 ![在这里插入图片描述][20210525163315669.gif_pic_center] 2、实现方法： <el-input v-mo

Dear 丶/ 2022年10月15日 13:57/ 0 赞/ 495 阅读

相关 vue + 百度地图点选地址（地址逆解析）

1、先上效果图： ![在这里插入图片描述][20210525142108883.gif_pic_center] 2、实现方法：百度地图的引用方法本篇文章没有提

约定不等于承诺〃/ 2022年10月15日 12:59/ 0 赞/ 499 阅读

相关百度地图api搜索地址定位

[下载地址][Link 1]百度地图api地址搜索定位示例，选择公司名称地图上显示对应地址 ![1630441297.png][] dd: [Link 1]: http

向右看齐/ 2022年09月09日 12:47/ 0 赞/ 507 阅读

相关百度地图定位详解

百度地图这几天一直闷在家里搞百度地图，但是搞来搞去，我的android studio IDE硬是搞不出地图，在过程中出现了一次默认的北京地图，不过然并卵；我总结

ゝ一纸荒年。/ 2022年07月16日 01:16/ 0 赞/ 425 阅读

相关百度地图定位

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <titl

╰半橙微兮°/ 2022年05月06日 04:27/ 0 赞/ 502 阅读

相关百度地图定位笔记

首先在[百度地图开发平台][Link 1]注册并且申请密钥一顿操作之后，生成一个访问应用（AK），这个就是密钥 <script type="text/javas

太过爱你忘了你带给我的痛/ 2022年04月25日 01:30/ 0 赞/ 510 阅读

相关百度地图，搜索得到经纬度和地址

<input type="text" id="address" value="" placeholder="点击获取" onfocus="getaddr()" styl

快来打我*/ 2022年04月10日 14:18/ 0 赞/ 449 阅读