javascript - 如何使用 vuejs 显示谷歌地图

Question

如何使用 vuejs 显示谷歌地图。我试过但没有显示，我安慰控制台没有错误，我在下面给出了代码。我需要在那个 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);
},

标签： javascriptapigoogle-mapsvue.js

Answer 1

尝试在 Vue 中$refs使用而不是访问子组件和元素getElementById

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


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