Question

研究员，

我正在尝试使用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 listener。但没有成功！

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

Answer 1

在CSS中设置map_canvas是否有尺寸？（例如100vw，100vh）

Answer 2

你在everythingReady函数中有一个错误，你无法访问elment 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

vuejs中的cordova-plugin-googlemaps并没有显示出来

2 个答案: