出现状况
一开始，在vue-cli3中我通过axios获取了后台数据并推到了data里面的mapdata数据内。然后想通过调取高德的API进行地图的绘制，但是我发现无论如何取不到mapdata的数据。以下我贴一下源代码
export default {
name: 'map',
data () {
return {
mapdata: []
}
},
mounted(){
this.axios.get('url')
.then(response => {
// this.mapdata = response.data.data;
for(var i=0; i<response.data.data.length; i++)
{
this.mapdata.push({
'name': response.data.data[i].name,
'center': response.data.data[i].location
});
}
console.log(this.map);
})
.catch(function (error) {
console.log(error)
})
this.create();
},
methods: {
createmap()
{
var map = new AMap.Map('map', {
resizeEnable: true, //是否监控地图容器尺寸变化
mapStyle: 'amap://styles/grey',
zoom: 13,
features: ['bg', 'road', 'building', 'point'],
viewMode: '3D',
center: [106.515301,29.510008]
});
var layer = new Loca.PointLayer({
map: map,
eventSupport: true, // selectStyle 配置需要开启 eventSupport: true
});
var data = this.mapdata;
layer.setData(data, {
lnglat: 'center'
});
layer.render();
}
}
}
然后我分别打印了一下mouted和methods里面的mapdata数据，我发现在mouted中出现的是[ {}, {}, {},{} _ob_ observe] 数据特征，而在methods中打印的数据直接就为[ _ob_ observe] 。
解决方法
一开始我在官方文档里面进行查询，让我发现貌似这样可以。
官方文档
然后在methods里面修改成了如下所示：
var data = JSON.parse(JSON.stringify(this.mapdata));
然而并没有起什么作用，但是问题的关键来了，在mouted里面我也这样对mapdata进行了处理。打印出来发现把后面的observe对象消除了，此时我便想，会不会是位置不对。然后我修改了代码
export default {
name: 'map',
data () {
return {
mapdata: []
}
},
mounted(){
this.axios.get('url')
.then(response => {
// this.mapdata = response.data.data;
for(var i=0; i<response.data.data.length; i++)
{
this.mapdata.push({
'name': response.data.data[i].name,
'center': response.data.data[i].location
});
}
var map = new AMap.Map('map', {
resizeEnable: true, //是否监控地图容器尺寸变化
mapStyle: 'amap://styles/grey',
zoom: 13,
features: ['bg', 'road', 'building', 'point'],
viewMode: '3D',
center: [106.515301,29.510008]
});
var layer = new Loca.PointLayer({
map: map,
eventSupport: true, // selectStyle 配置需要开启 eventSupport: true
});
var data = JSON.parse(JSON.stringify(this.mapdata));
layer.setData(data, {
lnglat: 'center'
});
layer.render();
})
.catch(function (error) {
console.log(error)
})
},
methods: {
}
}
最后发现这样竟然成功了！！！
原因
在后面，我去查了下observe的具体详情
observe是作为数据的的观察者所拥有的，同理还有如下两个
- Observer: 数据的观察者，让数据对象的读写操作都处于自己的监管之下
- Watcher: 数据的订阅者，数据的变化会通知到Watcher，然后由Watcher进行相应的操作，例如更新视图
- Dep: Observer与Watcher的纽带，当数据变化时，会被Observer观察到，然后由Dep通知到Watcher
而observe则检查对象上是否有_ob_d属性，如果存在，则表明该对象已经处于Observer的观察中，如果不存在，则new Observer来观察对象。如果我们要写到methods里面的方法中，再由mouted去调用它则进行了两次观察。它会直接封闭这个数据导致我们只能看。因此，我们最好就是调用data里面数据后立即使用它，否则会出现意想不到的情况
