在 rails 应用程序中使用 Vue.js 显示 Google 地图

Question

Good day,再会，

I have a simple rails app and I need to load a Google Map using Vue.js.我有一个简单的 rails 应用程序，我需要使用 Vue.js 加载 Google 地图。 Am able to display the Map outside of the vue div.能够在 vue div 之外显示地图。 However the map inside the view div is blank.但是视图 div 内的地图是空白的。 In other words 'map_canvas1' works and 'map_canvas2' doesnt.换句话说，“map_canvas1”有效而“map_canvas2”无效。

The link below is what i am trying to achieve.下面的链接是我想要实现的。

https://jsfiddle.net/zcahougd/ https://jsfiddle.net/zcahougd/

html html

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

script脚本

<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>

I load the scripts in我加载脚本

application.html.erb应用程序.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>

Answer 1

Found an answer to my question online.在网上找到了我的问题的答案。 It appears that the "ready" function is depricated and i needed to use "mounted".看来“就绪”功能已被弃用，我需要使用“已安装”。

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);
  }
});

在 rails 应用程序中使用 Vue.js 显示 Google 地图

问题描述

1 个解决方案

解决方案1
0 2019-12-23 08:40:56

在 rails 应用程序中使用 Vue.js 显示 Google 地图

问题描述

1 个解决方案

解决方案1 0 2019-12-23 08:40:56

解决方案1
0 2019-12-23 08:40:56