在 Rails 应用程序中使用 Vue.js 显示谷歌地图答案

【问题标题】：Display Google Map using Vue.js, inside a rails application在 Rails 应用程序中使用 Vue.js 显示谷歌地图
【发布时间】：2020-04-14 02:38:18
【问题描述】：

早安，

我有一个简单的 Rails 应用程序，我需要使用 Vue.js 加载 Google 地图。我能够在 vue div 之外显示地图。但是视图 div 内的地图是空白的。换句话说，“map_canvas1”有效，“map_canvas2”无效。

下面的链接是我想要实现的。

https://jsfiddle.net/zcahougd/

html

  <div id="map_canvas1"></div>
  <div id="vue-map">
     <div id="map_canvas2"></div>
  </div>

脚本

<script type="text/javascript">  

var mapOptions = {
  zoom: 8,
  center: new google.maps.LatLng(25.761680, -80.19179),
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);

var demo = new Vue({
  el: '#vue-map',
  data: {},
  ready: function(){
    var myOptions = {
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(25.761680, -80.19179)
  };
  var map = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);
}
});
</script>

<style>
#map_canvas1{
  width: 50%;
  height: 300px;
  border: 1px solid black;
  float:left;
}
#map_canvas2{
  width: 45%;
  height: 300px;
  border: 1px solid black;
  float:right;
}
  </style>

我将脚本加载到

application.html.erb

<!DOCTYPE html>
<html>
   <head>
    <title>GmapsRails</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://maps.googleapis.com/maps/api/jskey=AIzaSyDqamX08qYRLiZameV1cMgBRbzSDLgVWuY"> 
    </script>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

【问题讨论】：

标签： javascript ruby-on-rails vue.js

【解决方案1】：

在网上找到了我的问题的答案。看来“就绪”功能已被贬低，我需要使用“已安装”。

new Vue({
  el: '#vue-map',
  data: {},
  methods: {},
  mounted(){
      var myOptions = {
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(25.761680, -80.19179)
      };
      var mapp = new google.maps.Map(document.getElementById("map_canvas2"), 
                 myOptions);
  }
});

【讨论】：