yue1123 / vue3-baidu-map-gl

🎉百度地图 GL版 Vue3 组件库,baidu map gl components libary based on Vue3.0
https://yue1123.github.io/vue3-baidu-map-gl/
MIT License
378 stars 45 forks source link

useBrowserLocation的回调报错:Cannot read properties of null (reading 'insertBefore') #102

Closed ftxz233 closed 3 weeks ago

ftxz233 commented 3 weeks ago

未更新vue和vite版本时,useBrowserLocation返回的参数,响应式更新后,视图不更新,需要强制刷新。后续更新版本后,视图能正常刷新,但是useBrowserLocation回调报错。 旧版本: "vue": "3.2.45", "vite": "3.2.3" 现版本: "vue": "3.4.31", "vite": "5.3.2", 父组件:

<el-row :gutter="20">
  <el-col :span="6">
    <el-form-item prop="test1" label="省市区选择">
      <el-cascader :options="regionData" v-model="selectedOptions" style="width: 100%"> </el-cascader>
    </el-form-item>
   </el-col>
   <el-col :span="12">
     <el-form-item prop="test2" label="定位">
       <location-map></location-map>
     </el-form-item>
  </el-col>
</el-row>

子组件:

<template>
  <template v-if="hasLocation">
    <div class="state" v-if="!isLoading && !isError">
      <h5>定位:</h5>
      <span>
        城市 - {{ location.address?.province }}-{{ location.address?.city }}-{{ location.address?.district }}-{{
          location.address?.street
        }}
      </span>
      <span>纬度 - {{ location.point?.lat }}</span>
      <span>经度 - {{ location.point?.lng }}</span>
      <br />
      <span>定位精度 - {{ location.accuracy }}m</span>
    </div>
    <div class="state" v-else-if="isError">出错了,{{ status }}</div>
    <div class="state" v-else>定位中...</div>
    <button @click="get">重新获取</button>
    <BMap
      :ak="BaiduMapAK"
      enableScrollWheelZoom
      ref="map"
      @initd="get"
      :center="location.point || undefined"
      height="160px"
    >
      <template v-if="!isLoading">
        <BMarker :position="location.point"></BMarker>
        <BCircle
          strokeStyle="solid"
          strokeColor="#0099ff"
          :strokeOpacity="0.8"
          fillColor="#0099ff"
          :fillOpacity="0.5"
          :center="location.point"
          :radius="100"
        />
      </template>
    </BMap>
  </template>
  <template v-else>
    <el-input class="cursor-pointer" placeholder="请选择定位" readonly>
      <template #suffix>
        <el-icon class="cursor-pointer icon-hover"><LocationFilled /></el-icon>
      </template>
    </el-input>
  </template>
</template>

<script setup>
import { BMap, BMarker, BCircle, useBrowserLocation } from 'vue3-baidu-map-gl'
import { LocationFilled } from '@element-plus/icons-vue'
import { onMounted } from 'vue'

// const props = defineProps(['locations'])
// const emit = defineEmits(['update:locations'])
const BaiduMapAK = '**************************************'
const hasLocation = ref(true)
const map = ref(null)
const { get, location, isLoading, isError, status } = useBrowserLocation(null, () => {
  console.log('it is start')
  console.log(map.value)
  map.value.resetCenter()
  console.log('it is end')
  console.log(map.value)
})
onMounted(() => {
  console.log(map.value)
})
</script>

浏览器警告:Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core . 浏览器报错:Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore')

ftxz233 commented 3 weeks ago

已经定位到错误了,是v-if导致的。v-if改为v-show即可

<BMap
      :ak="BaiduMapAK"
      enableScrollWheelZoom
      ref="map"
      @initd="get"
      :center="location.point || undefined"
      height="160px"
    >
    // v-if修改为v-show
      <template v-show="!isLoading">
        <BMarker :position="location.point"></BMarker>
        <BCircle
          strokeStyle="solid"
          strokeColor="#0099ff"
          :strokeOpacity="0.8"
          fillColor="#0099ff"
          :fillOpacity="0.5"
          :center="location.point"
          :radius="100"
        />
      </template>
    </BMap>