如何使用 vuejs 绑定到来自谷歌地图的标记的属性标题？

Posted 2023-02-23

【中文标题】如何使用 vuejs 绑定到来自谷歌地图的标记的属性标题？

【英文标题】：How do I do bind to property title of a marker from google maps with vuejs?

【发布时间】：2018-03-30 22:35:00

【问题描述】：

我正在使用 api google maps 现在我正在使用 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='I change' 并且没有发生任何事情时，地图上的标记保持“你好”，请问我该怎么做？如果不使用 api google maps 原生的方法可以做到这一点，谢谢！！

【参考方案1】：

你可以使用手表

watch: 
  marker() 
    this.reDrawMarkers()
  

更多信息 vue 观察者https://vuejs.org/v2/guide/computed.html#Watchers

如果你不知道如何重绘标记，你也可以看看谷歌文档

https://developers.google.com/maps/documentation/javascript/examples/marker-remove