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

时间:2015-08-13 12:38:34

标签: javascript google-maps google-api

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

所以,这是我的代码(我发表了一些评论,以便他们能够更快地理解):

<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)。

嗯,现在看看我看到的内容(每张图片都是刷新页面的快照):

  

有时工作正常,有时......

enter image description here

  

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

enter image description here

  

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

enter image description here enter image description here enter image description here

  

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

  • 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

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

2 个答案:

答案 0 :(得分:5)

以下答案是根据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");
});

答案 1 :(得分:2)

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

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

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