Googleマップを有効にするにはどうすればよいですか？

Question

私は現在、コンポーネントがマウントされているときにlatとlngが選択されていないため、Googleマップを反応させる方法を考えています。私のコードを見てみましょう：このコンポーネントは

<template> 
    <div> 
     <div class="google-map" id="sidebar-map"></div> 
    </div> 
</template> 

<script> 
    export default { 
     props: ["coordinates", "zoom"], 

     data() { 
      return { 
       latLng: { 
        lat: 0, 
        lng: 0 
       } 
      } 
     }, 

     mounted() { 
      this.latLng = this.coordinates; 

      let map = new google.maps.Map(document.getElementById('sidebar-map'), { 
       zoom: this.zoom, 
       center: this.latLng 
      }); 
      let marker = new google.maps.Marker({ 
       position: this.latLng, 
       map: map 
      }); 
     } 
    } 
</script> 

私は、データがnew google.maps.Mapとnew google.maps.Marker変更されることができます任意の方法はありますか？

どのようなアイデアや方向性/ヒントも高く評価されます。

Answer 1

coordinatesまたはzoom小道具の変更を見ることができます。

https://vuejs.org/v2/guide/computed.html#Watchers

は、私はGoogle MapsのAPIに精通していないんだけど、その高価な（または破損が）とき常に同じ要素にリバウンド場合、あなたはあなたのコンポーネントのフィールドにインスタンスを格納し、使用して検討することもでき任意のAPIメソッドを使用して、プログラムでズームと座標を変更できます。