如何解决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
快乐编码!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。