如何使用vuejs显示Google地图

Question

如何使用vuejs显示Google地图。我试过但没有显示，但在控制台中没有出现错误，我在下面给出了代码。我需要在div标签中显示地图。

<template>
  <va-card type="plain"  >
    <div id="map" >
    </div>
  </va-card>
</template>

下面是我的脚本

mounted() {
  let myLatlng = new window.google.maps.LatLng(12.9716 , 77.5946);
  let mapOptions = {
    zoom:14,
    center: myLatlng,
    scrollwheel: true, 
  }; 
  let map = new window.google.maps.Map(
    document.getElementById("map"),
    mapOptions
  );

  let marker = new window.google.maps.Marker({
    position: myLatlng,
    title:  "Banglore" 
  });
  marker.setMap(map);
},

Answer 1

尝试使用$refs代替getElementById Accessing child components and elements in Vue

<template>
  <va-card type="plain"  >
      <div ref="map"></div>
  </va-card>
</template>


mounted() {
    ....
    let map = new window.google.maps.Map(
        this.$refs.map,
        mapOptions
    );
    ...
}