百度地图地址逆解析(循环显示点信息,涉及到同步异步) 优化

本文介绍了两种在Vue项目中使用百度地图进行地址逆解析的方法。第一种是在地图初始化时渲染点并预处理信息窗口,点击事件直接打开。第二种是延迟处理,点击时才进行地址逆解析和信息窗口渲染,避免无效地址。文中提供了具体的代码示例和注意事项,如处理海中坐标无法解析的情况。
摘要由CSDN通过智能技术生成

在这里插入图片描述

方法一:初始化地图时,渲染好点、点的信息,点击事件就打开信息窗口即可

从接口获取数据,console.log打印之后到控制台查看字段情况,这里坐标的字段为gps
这里坐标的字段是 gps

地址逆解析结果判断,当地址不存在(即点在无法解析出来的地方(比如黄海之类),要进行筛选)

  • 第二个实际在海中,无法解析出属于省市县,故逆解析出来的地址为空

第二个实际在海中,无法解析出属于省市县,故逆解析出来的地址为空

下面就是函数部分的代码,记得调用函数

getData() {
   
	fetchData().then(res => {
   
		res.data.forEach(item => {
    // 循环所有的数据,取出需要用到的字段
			if (item.gps) {
    // 先判断坐标存在,才能往地图上添加点以及信息窗口,地址逆解析,不然渲染空的坐标点会报错
            var lng = item.gps.split(',')[0]
            var lat = item.gps.split(',')[1]
            var Gps = new BMap.Point(lng, lat)
            // 自定义点的样式,Size大小就设置成图片原始大小即可
            var myIcon = new BMap.Icon(require('../img/yuanku-small(1).png'), new BMap.Size(26, 38))
            var marker = new BMap.Marker(Gps , {
    icon: myIcon })
            this.map.addOverlay(marker)
			
            var myGeo = new BMap.Geocoder()  // 
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值