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

约定不等于承诺〃 2022-10-15 12:59 433阅读 0赞

## 1、先上效果图： ##

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

## 2、实现方法： ##

### 百度地图的引用方法本篇文章没有提及，需要的可以去百度地图官网查看具体引入教程。 ###

### [参考官网demo例子][demo] ###

<div id="map" style="width: 100%;height: 500px" />
    
    初始化地图：
    intiMap(){ 
    	const map = new BMapGL.Map('map') // 创建地图实例
    	const point = new BMapGL.Point(106.553263, 29.557184) // 创建点坐标
    	map.centerAndZoom(point, 12) // 初始化地图，设置中心点坐标和地图级别
    	map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
    	this.addMapClickEvent(map) // 绑定鼠标点击事件
    }
    
    点击事件：
    addMapClickEvent(map) { 
          const geoc = new BMapGL.Geocoder()
          map.addEventListener('click', (e) => { 
            map.clearOverlays() // 清空地图上的覆盖物
            const pt = e.latlng
            const marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat))
            map.addOverlay(marker) // 生成覆盖物-marker点
            geoc.getLocation(pt, (rs) => { 
            	console.log('点击的当前位置信息---',rs)
            })
         })
    }

[20210525142108883.gif_pic_center]: /images/20221014/9656eb12e62e422785d910c2e9a12ed5.png
[demo]: https://lbsyun.baidu.com/jsdemo.htm#xRevAddressParseSingle

发表评论取消回复

表情：

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

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

相关阅读

相关百度地图地址转经纬度

一、文档介绍 1、格式。 http://api.map.baidu.com/geocoding/v3/?address=北京市海淀区上地十街10号&output

古城微笑少年丶/ 2023年10月10日 10:13/ 0 赞/ 10 阅读

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

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

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

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

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

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

相关使用百度地图API 逆地址解析

使用百度地图API 逆地址解析。数据库中查询出地址，调用百度API解析 <script type="text/javascript" src="http://api.map

ゝ一纸荒年。/ 2022年07月24日 12:13/ 0 赞/ 567 阅读

相关百度地图地址解析

关于百度地图的地址解析和地址逆解析的API可参考下面网址： [Geocoding API v2.0][] 直接将一个地址信息转换为经纬度的信息，如下 <html

电玩女神/ 2022年07月13日 13:16/ 0 赞/ 243 阅读

相关百度地图逆地址解析

对于百度地图的逆地址解析，首先必须声明 var geoc = new BMap.Geocoder(); 然后将坐标点转换为百度坐标点 var point

不念不忘少年蓝@/ 2022年07月13日 13:15/ 0 赞/ 266 阅读

相关微信小程序使用地图(一) 获取位置、移动选点、逆地址解析

wxml: <view class="page-body"> <view class="page-section page-section-ga

我会带着你远行/ 2022年05月26日 00:28/ 0 赞/ 384 阅读

相关百度地图上单击获取地址

<style> allmap{width:100%;height:240px;} p{margin-left:5px; font-siz

秒速五厘米/ 2022年03月12日 08:38/ 0 赞/ 344 阅读

相关百度地图地址解析和逆地址解析

[教程地址][Link 1] 地址解析:将地址转换成经纬度坐标逆地址解析（地理逆编码）:将经纬度转换成地址提供的转换类：BMap.

傷城~/ 2021年07月24日 15:06/ 0 赞/ 917 阅读

相关百度地图JavaScript API 学习之地址解析

获取地图数据之地址解析首先我们需要知道如何进行地址解析以及有哪些地址解析的方式。其实，百度地图API给我们提供了2种解析方式：`地址解析`和`逆地址解析`。下面

àì夳堔傛蜴生んèń/ 2021年06月26日 16:06/ 0 赞/ 1004 阅读