0

我正在为希望在“关于我们”页面上显示其位置的地图的客户建立一个站点。我使用 Google Maps Javascript API 在桌面站点 (www.al-van.org/jake/aboutUs.html) 上运行地图并且功能齐全。一切都很顺利，但是当我尝试在我的 android 设备上查看该网站时，我只是得到一个“糟糕，出了点问题，请参阅错误控制台以获取更多技术信息”，这对我没有多大帮助。我似乎无法弄清楚发生了什么以及为什么它无法在移动设备上运行。我需要使用 Javascript API，因为客户端想要地图上的 2 个位置，而嵌入 api 不会这样做。这是我的 JS，HTML 是一个带有引导框架的简单 div。

<script>
    function initMap()
    {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 16,
            center: {lat: 42.389795, lng: -86.258617},
            styles: [
                {elementType: 'geometry'},
                {elementType: 'labels.text.stroke'},
                {elementType: 'labels.text.fill'}
            ]
        });
        // array used to label markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        // Add some markers to the map.
        var markers = locations.map(function(location, i) {
            return new google.maps.Marker({
                position: location,
                label: labels[i % labels.length]
            });
        });
        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers, {imagePath: 
'googlemaps/m'});
    }
    var locations = [
        {lat: 42.390337, lng: -86.259642},
        {lat: 42.388635, lng: -86.257246}
    ]
</script>
<script src="googlemaps/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js? 
 key=API_KEY&callback=initMap"></script>
4

2 回答 2

3

在与 Google 支持合作后，问题似乎在于 android Chrome 放入网站的方式。我已经明确设置了我允许的 HTTP 引荐来源网址，包括 www.blahblahblah.com 和使用通配符的各种变体。我没有做的是用通配符代替“www”当我将通配符设置为blahblah.com时，它允许它在手机上工作。出于某种原因，除非您在 Android Chrome 浏览器中明确键入“www.example.com”，否则它不会自动填充“www”。这就是解决我的问题的方法，我希望它对将来有所帮助。

于 2018-06-23T05:03:33.627 回答
0

您的 API 密钥对域无效，或者超过了配额限制。

去这里：https ://developers.google.com/maps/documentation/javascript/get-api-key

获取您正在使用的域的 API 密钥。

于 2018-06-21T13:17:34.230 回答