IONIC 2 - Google 地图 API 在托管后无法与浏览器一起使用

问题描述 投票：0回答：3

托管后，我的 Google Maps API JavaScript 无法在浏览器中运行。 我的主办方是 OVH France。

控制台警告：

Google 地图 API 警告：NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

控制台错误：

Google 地图 API 错误：MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error _.Pb@js:38

但是我已经注册并激活了 API 密钥。

        <ion-col>
          <div #map id="map"></div>
        </ion-col>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"></script>

.ts 文件上的功能搜索 Firebase 事件地址并显示在地图中。 地图在本地主机 Web 浏览器和 Android 版本 (.apk) 上运行OK。

javascript google-maps ionic2
3个回答
0
投票

我从不使用按键，但我的 G 地图却神奇地工作......有什么问题？

<!DOCTYPE html>
<head>

<style type="text/css">
.GMap {
 position:absolute;
 left: 50px;
 top: 50px;
 width: 400px;
 height: 400px;
 border: 1px solid #000000;
}

</style>
</head>

<script src="https://maps.googleapis.com/maps/api/js"></script>

<script type="text/javascript">
function GoogleMap(){
var mapCenter=new google.maps.LatLng(33.54749540415048,37.81249999999999);
var mapOptions={center:mapCenter, zoom:2, mapTypeId:google.maps.MapTypeId.ROADMAP};
var map=new google.maps.Map(document.getElementById("mapcanvas"),mapOptions);
var Custom=[{"featureType":"all","elementType":"all","stylers":[{"hue":"#2fa8d5"},{"saturation":-17},{"lightness":5},{"gamma":1.531},{"invert_lightness":false}]}];
map.setOptions({styles:Custom});
var infostr='Hello!';
var infowindow=new google.maps.InfoWindow({content:infostr});
infowindow.setPosition(mapCenter);
infowindow.open(map);
}

window.onload=GoogleMap;

</script>
 <div id="mapcanvas" class="GMap"></div>
</body>
</html>
0
投票

并且，您是否在 console.developers.google.com 上分配了权限？

0
投票

OP 的解决方案。

Maps 的脚本必须添加到 Ionic 项目的 index.html 文件中才能正确运行。 我直接在组件中使用，所以出现错误。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.