无法在 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 密钥与简单的 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
【讨论】:
以上是关于无法在 vue cli 组件上显示谷歌地图的主要内容,如果未能解决你的问题,请参考以下文章
如何通过对vue js中的每个搜索结果使用模态在谷歌地图上显示json数据获得的纬度和经度?