美好的一天，
我有一个简单的rails应用程序，我需要使用Vue.js加载谷歌地图。我可以在 vuediv 之外显示地图。但是，视图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>
我加载脚本
应用程序.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>
在网上找到了我问题的答案。似乎"就绪"功能已弃用，我需要使用"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);
}
});