Question

好吧，根本无法理解为什么它不适用于谷歌地图。我阅读了几乎所有文档，不仅仅是因为我遇到的问题，还因为我需要使用多边形等等。

所以，这是我的代码（我发表了一些评论，以便他们能够更快地理解）：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div style="width:100%;height:400px;padding:0;margin:0;">
    <div id="canvas" style="width:100%; height:100%;padding:0;margin:0;"></div>
</div>

<script>
    function initialize() {
        var colors = ['#00bfff','#7eabe9','#799fe7','#7293e5','#6989e4','#5e7ee3','#5273e2','#4169e1','#4b6fde','#5274db','#5979d8','#5f7fd5','#6584d2','#698acf','#1e90ff'];
        var location = [
            {"name":"lisboa","lat":38.725717,"lng":-9.150248},
            {"name":"madrid","lat":40.420275,"lng":-3.705766},
            {"name":"burdeos","lat":44.836625,"lng":-0.581048},
            {"name":"loira","lat":46.621773,"lng":2.452032},
            {"name":"paris","lat":48.856929,"lng":2.341198},
            {"name":"bruselas","lat":50.848375,"lng":4.349679},
            {"name":"rotterdam","lat":51.922848,"lng":4.478452},
            {"name":"amsterdam","lat":52.373085,"lng":4.893276}
        ];
        var map = new google.maps.Map(document.getElementById('canvas'), {
            'center'    :   new google.maps.LatLng(0,-180),
            'zoom'      :   3,
            'mapTypeId' :   google.maps.MapTypeId.TERRAIN
        });

        // store positions on var flightPlanCoordinates
        var flightPlanCoordinates = [];

        // set markers and popovers/infWindow
        // *remember var flightPlanCoordinates*
        for (var i = 0; i < location.length; i++) {
            var lat     =   location[i].lat,
                lng     =   location[i].lng,
                name    =   location[i].name;
            var pos     =   new google.maps.LatLng(lat, lng);
            var infowindow =  new google.maps.InfoWindow({
                'content'   :   name,
                'map'       :   map,
                'position'  :   pos
            });
            infowindow.close();
            flightPlanCoordinates.push(pos);
            var marker = new google.maps.Marker({
                'position'  :   pos,
                'map'       :   map,
                'title'     :   name,
                'icon'      :   {
                    'path'      :   google.maps.SymbolPath.CIRCLE,
                    'scale'     :   5,
                    'strokeColor':  colors[i]
                }
            });
            google.maps.event.addListener(marker, 'click', function() {
                if (infowindow) {
                    infowindow.close();
                }
                infowindow.open(map, this);
            });
        }
        // set polylines
        // *remember var flightPlanCoordinates*
        for (var i = 0; i < flightPlanCoordinates.length; i++) {
            if(typeof flightPlanCoordinates[i+1] == 'undefined'){
                continue;
            }
            var PathStyle = new google.maps.Polyline({
                'path'          : [
                    flightPlanCoordinates[i],
                    flightPlanCoordinates[i+1]
                ],
                'strokeColor'   : colors[i],
                'strokeOpacity' : 1.0,
                'strokeWeight'  : 2,
                'map'           : map
            });
        }
    }
    // Draw Google Maps V3
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

页面/网站的UTF-8没有BOM Charset，通过文档和服务器（apache强制UTF-8，HTML写入UTF-8，无BOM）。

嗯，现在看看我看到的内容（每张图片都是刷新页面的快照）：

有时工作正常，有时......

Anothertimes，工作，工作不好，非常糟糕......

Anothertimes，工作，工作不好，非常糟糕，并显示零件削减零件...

我还在以下浏览器中对此进行了测试：

iPad Air 2，iOS 8.1 - Google Chrome 44.0.2403.67
iPad Air 2，iOS 8.1 - Safari
MacBook Air，优胜美地 - Google Chrome
MacBook Air，优胜美地 - Safari
MacBook Air，优胜美地 - Firefox
Windows 8 - 禁用Adblock的Google Chrome
Windows 8 - Firefox
Windows 8 - Safari
Windows 8 - Internet Explorer 8,9,10
Android 4.4.4，小米MI4 - 谷歌Chrome Android
Android 4.4.4，小米MI4 - Firefox Android
Window Phone 8.10 - Internet Explorer
Firefox OS 1.1.0.0 - Internet Explorer

此处为代码段 - http://jsbin.com/fozocimuke/edit?html,js,output - http://codepen.io/anon/pen/eNoGVN

拜托，帮助我...我不明白这里发生了什么...... 感谢。

Answer 1

以下答案是根据OlafErlandsen的问题编辑的，以保持对Q＆amp; A格式的SO。如果以下是有用的，请提出他的问题

好吧，我的canvas元素（div＃canvas）在开始时的高度为0px   page（onload event），所以，解决方案很简单：需要响应式地图   因为默认情况下谷歌地图没有响应。

谷歌地图Api有多个处理程序和方法来帮助解决这个问题   案例，例如：

<强> google.maps.event.trigger（）

<强> google.maps.event.addDomListener（）

所以，如果你需要＆＃34;启用＆＃34;响应式地图，您需要以下代码：

// you need the "map" var and this has to be a "map" (new google.maps.Map(...))
var map = ...;
// And you need
google.maps.event.addDomListener(window, 'resize', function() {
    var center = map.getCenter();
    map.setCenter(center);
});
// And aditionally you can need use "trigger" for real responsive
google.maps.event.trigger(map, "resize");

而且，如果你使用像Bootstrap，jQuery，jQuery UI和另一个libs，谷歌地图提出类似问题，你可以使用 trigger。＆＃34;记住并思考＆＃34; slide＆＃34;的影响 jQuery和＃34;

jQuery UI上的示例：

$("#accordion").bind('accordionchange', function(event, ui) {
    // here you trigger
    // And remember "map" var, in this case we assume that it is a global variable.
    google.maps.event.trigger(map, "resize");
});

Answer 2

我为我找到了解决方案，使用以下代码来解决问题：

// you need to use "map" var name Example : var map = (new google.maps.Map(...));

setTimeout(function() { google.maps.event.trigger(map, 'resize') }, 600);

谷歌地图有时不工作......或几乎总是不工作

2 个答案: