如何使用vuejs绑定到谷歌地图中的标记的财产标题?
问题描述:
我与API谷歌的工作现在可以映射我与vuejs发展现在存在posibility从属性从标志物的产权约束,例如 这是我在vuejs如何使用vuejs绑定到谷歌地图中的标记的财产标题?
Vue.component('root-map',{
template: `
<div id="sidebar_builder"
style="width: 100%; height: 600px;">
</div>
`,
data: function(){
return {
map:null,
marker:{
title: 'hello'
}
}
},
mounted: function() {
this.$nextTick(function() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
};
this.map = new google.maps.Map(document.getElementById('sidebar_builder'),mapOptions);
var marker_icon= new google.maps.Marker({
position: myLatlng,
title: this.marker.title}); // the most important part
marker_icon.setMap(this.map);
});
}
});
现在,当我想分量更改属性markers.title ='我改变'并且什么也没有发生,地图上的标记保持'你好',请问我该怎么做?如果可以做到这一点,而不使用方法本地从API谷歌地图谢谢!
答
您可以使用手表
watch: {
marker() {
this.reDrawMarkers()
}
}
更多信息VUE守望https://vuejs.org/v2/guide/computed.html#Watchers如果你不知道如何重绘标记也可以看看谷歌文档
https://developers.google.com/maps/documentation/javascript/examples/marker-remove