Uncaught TypeError: Cannot read property 'Ha' of null

[JakeWoki]

[BUG 反馈] Uncaught TypeError: Cannot read property 'Ha' of null

浏览器版本号

Google Chrome 66.0.3359.181

Vue 版本号

2.5.2

组件库版本号

0.21.10

现象描述

先点定位，再点一下地图（marker会移动到点击位置），再点定位，会报错Uncaught TypeError: Cannot read property 'Ha' of null

完整异常信息

Uncaught TypeError: Cannot read property 'Ha' of null
    at Ka.eval (eval at zZ (getscript?v=2.0&ak=aaaaa&services=&t=20180629105709:1), <anonymous>:1:556)
    at Ka.x.lang.Ca.dispatchEvent (getscript?v=2.0&ak=aaaaa&services=&t=20180629105709:1)
    at Ka.Dd (getscript?v=2.0&ak=aaaaa&services=&t=20180629105709:1)
    at Geolocation.eval (eval at zZ (getscript?v=2.0&ak=aaaaa&services=&t=20180629105709:1), <anonymous>:1:1202)
    at d (eval at zZ (getscript?v=2.0&ak=aaaaa&services=&t=20180629105709:1), <anonymous>:1:1803)
    at eval (eval at zZ (getscript?v=2.0&ak=aaaaa&services=&t=20180629105709:1), <anonymous>:1:2145)
    at window.(/anonymous function) (eval at zZ (https://api.map.baidu.com/getscript?v=2.0&ak=aaaaa&services=&t=20180629105709:1:54250), <anonymous>:1:9263)
    at ip?qt=loc&coor=bd09ll&ak=aaaaa&timeout=10000&callback=_cbk16835:1
(anonymous) @ VM151757:1
x.lang.Ca.dispatchEvent @ getscript?v=2.0&ak=aaaaa&services=&t=20180629105709:1
Dd @ getscript?v=2.0&ak=aaaaa&services=&t=20180629105709:1
(anonymous) @ VM151757:1
d @ VM151752:1
(anonymous) @ VM151752:1
window.(anonymous function) @ VM151752:1
(anonymous) @ ip?qt=loc&coor=bd09ll&ak=aaaaa&timeout=10000&callback=_cbk16835:1

在线示例 / 仓库 URL

<template>
  <baidu-map class="bm-view" :center="centerPoint" :zoom="zoom" @ready="handler" >

    <bm-marker @dragend="dragend" :position="markerPoint" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
      <bm-label content="交接点" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -24, height: -40}"/>
    </bm-marker>

    <bm-geolocation class="anchorTR" @locationSuccess="locationSuccess" @locationError="locationError" anchor="BMAP_ANCHOR_TOP_RIGHT" :autoLocation="true" :offset="{width: 10, height: 10}"></bm-geolocation>

    <bm-control anchor="BMAP_ANCHOR_BOTTOM_LEFT" :offset="{width: 10, height: 10}" style="width: 94%">
      <div style="display: -webkit-flex;display: flex;width: 100%">
        <button class="nearby">{{ destinationAddress }}</button>
        <button class="positive">确定</button>
      </div>
    </bm-control>

  </baidu-map>
</template>

<script>
export default {
  data () {
    return {
      centerPoint: {lng: 0, lat: 0},
      markerPoint: {lng: 0, lat: 0},
      destinationAddress: '',
      zoom: 16
    }
  },
  methods: {
    setPoint (lnglat, point) {
      lnglat.lng = point.lng
      lnglat.lat = point.lat
    },
    setDestinationAddress (addressComponents) {
      this.destinationAddress = addressComponents.city + addressComponents.district + addressComponents.street + addressComponents.streetNumber
    },
    getLocation (point) {
      var geoc = new window.BMap.Geocoder()
      geoc.getLocation(point, rs => {
        this.setPoint(this.markerPoint, rs.point)
        this.setDestinationAddress(rs.addressComponents)
      })
    },
    handler ({BMap, map}) {
      var point = new BMap.Point(116.331398, 39.897445)
      map.centerAndZoom(point, 16)

      this.getCurrentPosition()

      map.addEventListener('click', e => {
        this.getLocation(e.point)
      })
    },
    getCurrentPosition () {
      let geolocation = new window.BMap.Geolocation()
      geolocation.getCurrentPosition(r => {
        if (geolocation.getStatus() === 0) {
          this.setPoint(this.centerPoint, r.point)
          this.setPoint(this.markerPoint, r.point)
          this.destinationAddress = r.address.city + r.address.district + r.address.street + r.address.street_number
        } else {
        }
      })
    },
    dragend ({type, target, pixel, point}) {
      this.getLocation(point)
    },
    locationSuccess ({point, addressComponent, marker}) {
      this.setPoint(this.centerPoint, point)
      this.setPoint(this.markerPoint, point)
      this.setDestinationAddress(addressComponent)
    },
    locationError ({StatusCode}) {
    }
  }
}
</script>

<style>
  .bm-view {
    width: 100%;
    height: 100vh;
  }
  .nearby {
    width: 80%;
    height: 0.8rem;
    background: white;
  }
  .positive {
    width: 20%;
    height: 0.8rem;
    background: #0180DD;
    color: white;
  }
</style>

先点定位，再点一下地图（marker会移动到点击位置），再点定位会报错 如果去掉destinationAddress变量的赋值就不报错。可能和库没有关系，不过实在看不出什么问题，所以帮忙看一下是什么原因

[JakeWoki]

@Dafrok 求助

[Dafrok]

我没复现成功呢

[JakeWoki]

@Dafrok 地图加载完成后点定位按钮，定位后再随便点一下地图，再点击定位。这样就会报上面的报错

[ghost]

我又来了，我也是这样的 我现在是有两个报错。 一个是ready自动定位这里，注释的这一段，放开的话就会有一个报错

handler ({BMap, map}) { this.BMap = BMap;

            let _that = this

            if (!this.mapfirst) { //组件初始化自动定位

                this.mapfirst = true

                let geolocation = new BMap.Geolocation();
                // geolocation.getCurrentPosition(function(r){
                //  if(this.getStatus() == BMAP_STATUS_SUCCESS){
                //      console.log(r)
                //      _that.location.lng = r.longitude
                //      _that.location.lat = r.latitude
                //      //保存下一步需要的坐标
                //      _that.addpoint = {
                //          lng: r.longitude,
                //          lat: r.latitude
                //      }
                //      _that.locationadd = r.address.province + r.address.city + r.address.district + r.address.street
                //  }
                //  else {
                //      // alert('failed'+this.getStatus());
                //      Toast('定位失败')
                //  }
                // },{enableHighAccuracy: true})
            }
        },

假装有分割线 第二个就是和这位老兄一样

locationSuccess (res) { console.log(res) this.addpoint = res.point; console.log(res.point) this.locationadd = res.addressComponent.city + res.addressComponent.district + res.addressComponent.street }, 点击定位按钮后，再拖动地图就会有这样的报错，注释掉locationSuccess函数里面所有的内容，拖动的时候，就不报错了

[JakeWoki]

对了，上面的代码也会报

Uncaught SyntaxError: Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)
    at eval (eval at zZ (getscript?v=2.0&ak=aaa&services=&t=20180629105709:1), <anonymous>:1:8301)

https://github.com/Dafrok/vue-baidu-map/issues/374

[ghost]

不过我的功能好像都是正常的

[JakeWoki]

@cn-zx Uncaught TypeError: Cannot read property 'Ha' of null这个报错再次定位不正常的，按我上面的代码marker移不到中心位置的

[Dafrok]

感觉像是某些 control 被重渲染造成的，百度地图的 JS API 加密了，追踪略困难，我抽时间看看

[jetBn]

这里问题有解决吗？

[cjblomqvist]

I get the same issue by roughly doing the following: A) render map with markers and centered at a specific location B) destroy component (by client side routing), and then render again Repeat B) Error occurs. I also see different errors sometimes.

Uncaught TypeError: Cannot read property 'Xe' of undefined
    at Ka.eval (eval at AZ (getscript?v=2.0&ak=uQEvuTjB0ZDxgW5IVZlXLYcy0nRjsoi4&services=&t=20190622163250:1), <anonymous>:1:2368)
    at Ka.x.lang.Ca.dispatchEvent (getscript?v=2.0&ak=uQEvuTjB0ZDxgW5IVZlXLYcy0nRjsoi4&services=&t=20190622163250:1)
    at a.to (eval at AZ (getscript?v=2.0&ak=uQEvuTjB0ZDxgW5IVZlXLYcy0nRjsoi4&services=&t=20190622163250:1), <anonymous>:1:8931)

and

Error: 无效指针

  at Lc(/getscript:1:100077)
  at Hx(/getscript:1:94186)
  at oI(/getscript:1:96322)
  at Tf(/getscript:1:95117)
  at Anonymous function(eval code:1:213771)
  at x.lang.Ca.prototype.dispatchEvent(/getscript:1:8631)
  at a.to(eval code:1:8929)
  at r(..\..\..\./node_modules/@sentry/browser/esm/helpers.js:67:13)

I have not an exact repro right now unfortunately. Oh, and it only happens sometimes, so quite hard to debug unfortunately.

[StorySpeaker]

I have the same question