1

我想在tomtom中添加一个标记。我想在“数据”中定义一个地图，但是当我这样做时，它给了我一个错误：

maps.min.js:1 Uncaught (in promise) TypeError: 'get' on proxy: property '__om' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<i>' but got '#<i>')

只有在我添加“new tt.Marker”后才会出现错误。如果我直接在这个方法中定义一个地图，它就可以工作（而不是 this.map，我将使用 map 变量）。

这是我的 Vue 代码：

<template>
  <div class="map" id="map" ref="mapRef"></div>
</template>

<script>
import tt from '@tomtom-international/web-sdk-maps';
export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initializeMap()
  },
  methods: {
    initializeMap() {
    this.map = tt.map({
    key: 'key',
    container: this.$refs.mapRef,
    center: [-120.72217631449985, 42.73919549715691],
    zoom: 10
  });


  //Here I get error
  new tt.Marker()
      .setLngLat([-120.72217631449985, 42.73919549715691])
      .addTo(this.map);
    }
  }
}
</script>
4

1 回答 1

2

data属性默认为响应式，这似乎与 Tomtom Maps API 的操作冲突。但是，在这种情况下实际上不需要反应性。

该map属性应设置为冻结对象，Object.freeze()以解决该问题：

export default {
  methods: {
    initializeMap() {
      const map = tt.map(/*...*/);
      new tt.Marker().setLngLat(/*...*/).addTo(map);
                           
      this.map = Object.freeze(map);
    }
  }
}

演示

于 2022-01-18T04:13:06.817 回答