Google Maps在Vue模式中显示灰色框

问题描述

我有一个来自VueBootstrap的<b-modal>，我正尝试在其中渲染<GmapMap>（https://www.npmjs.com/package/gmap-vue）

它在模态内部渲染了一个灰色框，但在模态外部则渲染了地图。

我完成的所有搜索都导致我在某些地方发现的相同解决方案是google.maps.event.trigger(map,'resize')，该解决方案无法正常工作。显然，它不再是API的一部分[来源：https://stackoverflow.com/questions/13059034/how-to-use-google-maps-event-triggermap-resize]

<template>
  <div class="text-center">
    <h1>{{ title }}</h1>
    <div class="row d-flex justify-content-center">
      <div class="col-md-8">
        <GmapMap
          ref="topMapRef"
          class="gmap"
          :center="{ lat: 42,lng: 42 }"
          :zoom="7"
          map-type-id="terrain"
        />
        <b-table
          bordered
          dark
          fixed
          hover
          show-empty
          striped
          :busy.sync="isBusy"
          :items="items"
          :fields="fields"
        >
          <template v-slot:cell(actions)="row">
            <b-button
              size="sm"
              @click="info(row.item,row.index,$event.target)"
            >
              Map
            </b-button>
          </template>
        </b-table>

        <b-modal
          :id="mapModal.id"
          :title="mapModal.title"
          @hide="resetInfoModal"
          ok-only
        >
          <GmapMap
            ref="modalMapRef"
            class="gmap"
            :center="{ lat: 42,lng: 42 }"
            :zoom="7"
            map-type-id="terrain"
          />
        </b-modal>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
import { gmapApi } from 'gmap-vue';

export default {
  name: "RenderList",props: {
    title: String,},computed: {
    google() {
      return gmapApi();
    },updated() {
    console.log(this.$refs.modalMapRef);
    console.log(window.google.maps);


    this.$refs.modalMapRef.$mapPromise.then((map) => {
      map.setCenter(new window.google.maps.LatLng(54,-2));
      map.setZoom(2);
      window.google.maps.event.trigger(map,'resize');
    })
  },data: function () {
    return {
      items: [
        { id: 1,lat: 42,long: 42 },{ id: 2,{ id: 3,],isBusy: false,fields: [
        {
          key: "id",sortable: true,class: "text-left",{
          key: "text","lat","long",{
          key: "actions",label: "Actions"
        }
      ],mapModal: {
        id: "map-modal",title: "",item: ""
      }
    }
  },methods: {
    // dataProvider() {
    //   this.isBusy = true;
    //   let promise = axios.get(process.env.VUE_APP_LIST_DATA_SERVICE);

    //   return promise.then((response) => {
    //     this.isBusy = false
    //     return response.data;
    //   }).catch(error => {
    //     this.isBusy = false;
    //     console.log(error);
    //     return [];
    //   })
    // },info(item,index,button) {
      this.mapModal.title = `Label: ${item.id}`;
      this.mapModal.item = item;
      this.$root.$emit("bv::show::modal",this.mapModal.id,button);
    },resetInfoModal() {
      this.mapModal.title = "";
      this.mapModal.content = "";
    },}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  margin-bottom: 60px;
}
.gmap {
  width: 100%;
  height: 300px;
  margin-bottom: 60px;
}
</style>

有人知道如何使地图在模式中正确显示吗？

当然，我不是第一个尝试此操作的人吗？

解决方法

有这个问题，就我而言，它是通过向谷歌地图提供以下选项来解决的：

mapOptions: {
        center: { lat: 10.365365,lng: -66.96667 },clickableIcons: false,streetViewControl: false,panControlOptions: false,gestureHandling: 'cooperative',mapTypeControl: false,zoomControlOptions: {
          style: 'SMALL'
        },zoom: 14
      }

但是，您可能只需要居中和缩放即可。

编辑：尝试使用您自己的谷歌地图组件，遵循本教程：

https://vuejs.org/v2/cookbook/practical-use-of-scoped-slots.html#Base-Example

您可以使用教程中描述的包加载地图，不要被 npm 包页面上的大红色“已弃用”警告吓到。

但是对于生产，你应该使用作者引用的包，这是谷歌支持的包：

https://googlemaps.github.io/js-api-loader/index.html

两者唯一的大区别： 未弃用的加载程序不会返回“google”对象，而是附加到窗口。请在此处查看我的回答以进行澄清：

'google' is not defined Using Google Maps JavaScript API Loader

快乐编码！