时间戳

首页 > 解决方案 > 谷歌地图在 Vue 模态中显示灰色框

vue.js - 谷歌地图在 Vue 模态中显示灰色框

问题描述

我有一个<b-modal>来自 VueBootstrap，我试图在其中渲染一个<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, lat: 42, long: 42 },
        { id: 3, lat: 42, long: 42 },
      ],
      isBusy: false,
      fields: [
        {
          key: "id",
          sortable: true,
          class: "text-left",
        },
        {
          key: "text",
          sortable: true,
          class: "text-left",
        },
        "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>

有谁知道如何让地图在模态中正确显示？

当然，我不是第一个尝试这个的人？

标签： vue.jsgoogle-mapsbootstrap-modalbootstrap-vue

解决方案

有这个问题，在我的情况下，它通过向谷歌地图提供以下选项来解决：

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 Maps JavaScript API Loader 未定义“google”

快乐编码！

推荐阅读