无法在 vue cli 组件上显示谷歌地图

Posted

技术标签:

【中文标题】无法在 vue cli 组件上显示谷歌地图【英文标题】:Cannot display google map on vue cli component 【发布时间】:2022-01-22 02:26:33 【问题描述】:

我正在使用 google map api 使用 vue.js 创建一个简单的应用程序。如果我将 api 密钥与简单的 htmljavascript 一起使用,则该 api 密钥有效,但如果我将相同的进程移动到 vue,则不会出现地图,并且控制台中也不会出现错误,所以我不知道我做错了什么。

在项目的 index.html 文件中我整合了 api url 如下:

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=MY_API_KEY"></script>

Vue 组件

<template>
 <div>
  <h3>Here comes the map</h3>
<div ref="map" id="map"></div>
 <button @click="getMap">Show the map</button>
</div>
getMap() 

    const uluru =  lat: -25.344, lng: 131.036 ;
    const map = new window.google.maps.Map(this.$refs['map'],

         zoom: 15,
         center: uluru,
         mapTypeID: window.google.maps.MapTypeId.ROADMAP
       

return map;

在 vue cli 中调用谷歌地图对象我必须添加 window 否则它会给我一个错误。

new window.google.maps.Map()...instead of new google.maps.Map()

如前所述,下面的代码不会显示地图,也不会在控制台上报告任何错误。我做错了什么?

【问题讨论】:

【参考方案1】:

首先,检查您是否设置了正确的 Api 密钥而不是 key=MY_API_KEY。 二、添加一些样式#map height: 450px;,默认&lt;div ref="map" id="map"&gt;&lt;/div&gt;height = 0

【讨论】:

以上是关于无法在 vue cli 组件上显示谷歌地图的主要内容,如果未能解决你的问题,请参考以下文章

为啥手机上不能用谷歌地图

无法在谷歌地图上看到多个标记

谷歌地图每次都无法在地图上放置一些标记

如何通过对vue js中的每个搜索结果使用模态在谷歌地图上显示json数据获得的纬度和经度?

无法单击标记 - 谷歌地图集群Android,无法在谷歌地图中显示信息窗口

无法在 Android 谷歌地图上绘制路径