vuejs中的cordova-plugin-googlemaps不显示答案

【问题标题】：cordova-plugin-googlemaps in vuejs doesn't showvuejs中的cordova-plugin-googlemaps不显示
【发布时间】：2018-01-22 21:25:57
【问题描述】：

同学们，

我正在尝试使用 cordova-plugin-googlemaps 制作 Phonegap/Cordova（和 Framework7）以与 Vuejs 一起使用。尽管一切正常，但地图并未加载。

代码如下：

<template>
    <f7-page name="mapa">
        <div id="mapcanvas"></div>
    </f7-page>
</template>

<script>
  var map;
  let deviceReady = false;
  let vueMounted = false;
  export default {
    name: 'Mapa',
    data() {
      return {
        isConnected: false,
        map: undefined
      }
    },
    created () {
      vueMounted = true;
      if (deviceReady) this.everythingReady();
    },
    methods: {
      everythingReady() {
        var div = document.getElementById("mapcanvas");

        map = plugin.google.maps.Map.getMap(div);

        map.addEventListener(plugin.google.maps.event.MAP_READY, this.onMapReady);
      },
      onMapReady(){
        alert("mapa pronto");
      },
      onButtonClick() {
        map.animateCamera({
          target: {lat: 37.422359, lng: -122.084344},
          zoom: 17,
          tilt: 60,
          bearing: 140,
          duration: 5000
        }, function() {

          map.addMarker({
            position: {lat: 37.422359, lng: -122.084344},
            title: "Welecome to \n" +
            "Cordova GoogleMaps plugin for iOS and Android",
            snippet: "This plugin is awesome!",
            animation: plugin.google.maps.Animation.BOUNCE
          }, function(marker) {

            marker.showInfoWindow()

            marker.on(plugin.google.maps.event.INFO_CLICK, function() {

              alert("Hello world!")

            });
          });
        });
      },
    }
  }
  document.addEventListener('deviceReady', () => {
    deviceReady = true
    if (vueMounted) this.everythingReady()
  }, false);

</script>

<style>
    #mapcanvas{
        height: 100vh;
        width: 100vw;
        position:absolute;
        top: 0;
        left: 0;
    }
    canvas{
        display: block;
    }
</style>

执行了onMapReady()方法，但是地图没有打印出来。

更新：我稍微更改了代码以确保在创建 Vuejs 模块后执行代码，并且还触发了 deviceready 侦听器。但是没有成功！

任何想法可能是什么问题？

【问题讨论】：

标签： cordova vuejs2 cordova-plugins phonegap html-framework-7

【解决方案1】：

CSS 中的 map_canvas 是否设置为具有尺寸？（例如 100vw、100vh）

【讨论】：

没有设置，但现在设置了。还是看不到地图！
还有一件事要看 - 我知道谷歌地图使用
没有这样的东西。我正在运行测试，包括：canvas{display:block;}。没用！
也许它与 Vue 和模板渲染有关 - 在代码触发之前肯定会渲染模板吗？通常当我创建一个 Vue 模板时，它使用 var vm = new Vue(...)
代码已更新，但没有成功！你有这种配置的工作代码吗？

【解决方案2】：

你在everythingReady函数中有一个错误，你不能访问元素mapcanvas，因为它还不存在，你必须等到Vue挂载你的模板的HTML代码。

可以查看Vue的生命周期；

https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

具体来说，你必须实现mounted 方法，它应该看起来像：

//...
mounted () {
  if (deviceReady) {
     this.everythingReady();

},
//...

您可以从这本我认为有用的手册中指导自己：

https://medium.com/founders-factory/building-a-custom-google-map-component-with-vue-js-d1c01ddd0b0a

【讨论】：