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

Posted 2023-02-23

【中文标题】无法在 vue cli 组件上显示谷歌地图

【英文标题】：Cannot display google map on vue cli component

【发布时间】：2022-01-22 02:26:33

【问题描述】：

我正在使用 google map api 使用 vue.js 创建一个简单的应用程序。如果我将 api 密钥与简单的 html 和 javascript 一起使用，则该 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;，默认<div ref="map" id="map"></div>有height = 0