百度地址逆解析,修改vue的数据后没有对dom进行重新渲染

通过后台范围的经纬度,调用百度的逆解析接口获取到地理位置名称。但解析完成之后无法修改dom的值,需要怎么操作?想请教一下了解的大佬!

先上代码

//地址逆解析
var geoc = new BMap.Geocoder();                     //百度的方法
var pt = new BMap.Point(data.Lng, data.Lat);        //传入后台的经纬度
geoc.getLocation(pt, function (rs) {
  var addComp = rs.addressComponents;
  var area = addComp.province +  addComp.city + addComp.district + addComp.street + addComp.streetNumber;                                    //解析出地址
  _this.pointData.Area = area                        //保存数据
  console.log(_this.pointData.Area,1);               //打印
});
console.log(_this.pointData.Area,2);

data中的属性声明

 pointData: {
  LastTime: null,
  Speed: null,
  Lat: null,
  Lng: null,
  Area: null,
},

DOM的数据绑定

<div>定位时间: {{pointData.LastTime | moment("YYYY年MM月DD日")}}</div>
<div>定位速率:{{pointData.Speed}}KM/小时</div>
<div>位置:{{pointData.Area}}</div>

截图

clipboard.png

麻烦大佬抽空解答,万分感谢!

阅读 2.5k
2 个回答

这行代码改写下

_this.pointData.Area = area

// 修改为下面
_this.pointData = {
   ..._this.pointData,
   Area:area
}

pointData对象是引用类型,修改后引用的地址没变,vue检测不到变化.用this.$set(obj, key, value).

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏