折线API谷歌地图V3上的折线消失

时间:2014-08-11 16:30:51

标签: javascript google-maps google-maps-api-3

根据一个老话题,这个问题应该在API的第2版中修复 (https://code.google.com/p/gmaps-api-issues/issues/detail?id=15

在Chrome v.35.0.1916.153和IE9中测试出现的错误已经在Firefox v.31中完美运行了。

显示问题的代码:

http://jsfiddle.net/as0wv114/2/

  // HTML
    <div id="map-canvas"></div>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

//CSS
    html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

//JS
       var map;
    var latLngBounds;
    var coordinate = [];
    var flightPath = [];
    window.onload = initialize();

    function initialize() {

        /* Create Map */
        var mapOptions = {
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.SATELLITE,
            zoomControlOptions: {
                    position: google.maps.ControlPosition.LEFT_BOTTOM,
            },
            center: new google.maps.LatLng(-24.1207046509, -52.7306060791)
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),
                                  mapOptions);
        latLngBounds = new google.maps.LatLngBounds();    

        /* Create first polyline */
        coordinate[0] = new google.maps.LatLng('-24.1207046509', '-52.7306060791');
        coordinate[1] = new google.maps.LatLng('-24.1191787720', '-52.7316970825');
        coordinate[2] = new google.maps.LatLng('-24.1191864014', '-52.7337504883');   
        flightPlanCoordinates = [coordinate[0], coordinate[1], coordinate[2]];
        flightPath[0] = new google.maps.Polyline({
            path: flightPlanCoordinates,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 8
        });

        /* Create second polyline */
        coordinate[3] = new google.maps.LatLng('-25.2782688141', '-50.0997734070');   
        coordinate[4] = new google.maps.LatLng('-25.2793374786', '-50.0998001099');   
        flightPlanCoordinates = [coordinate[3], coordinate[4]];
        flightPath[1] = new google.maps.Polyline({
            path: flightPlanCoordinates,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 8
        });

        /* Set polylines in Map */
        flightPath[0].setMap(map);    
        flightPath[1].setMap(map);    

        /* Center polilynes in Map */
        $.each(coordinate, function(key, value){
            latLngBounds.extend(value);
        });
        map.fitBounds(latLngBounds);
    }

http://jsfiddle.net/as0wv114/3/

  // HTML
    <div id="map-canvas"></div>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

//CSS
    html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

//JS
       var map;
    var latLngBounds;
    var coordinate = [];
    var flightPath = [];
    window.onload = initialize();

    function initialize() {

        /* Create Map */
        var mapOptions = {
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.SATELLITE,
            zoomControlOptions: {
                    position: google.maps.ControlPosition.LEFT_BOTTOM,
            },
            center: new google.maps.LatLng(-24.1207046509, -52.7306060791)
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),
                                  mapOptions);
        latLngBounds = new google.maps.LatLngBounds();    

        /* Create first polyline */
        coordinate[0] = new google.maps.LatLng('-24.1207046509', '-52.7306060791');
        coordinate[1] = new google.maps.LatLng('-24.1191787720', '-52.7316970825');
        coordinate[2] = new google.maps.LatLng('-24.1191864014', '-52.7337504883');   
        flightPlanCoordinates = [coordinate[0], coordinate[1], coordinate[2]];
        flightPath[0] = new google.maps.Polyline({
            path: flightPlanCoordinates,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 8
        });

        /* Create second polyline */
        coordinate[3] = new google.maps.LatLng('-25.2782688141', '-50.0997734070');   
        coordinate[4] = new google.maps.LatLng('-25.2893374786', '-50.0998001099');   
        flightPlanCoordinates = [coordinate[3], coordinate[4]];
        flightPath[1] = new google.maps.Polyline({
            path: flightPlanCoordinates,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 8
        });

        /* Set polylines in Map */
        flightPath[0].setMap(map);    
        flightPath[1].setMap(map);    

        /* Center polilynes in Map */
        $.each(coordinate, function(key, value){
            latLngBounds.extend(value);
        });
        map.fitBounds(latLngBounds);
    }

由于代码在Firefox v.31中有效,问题出在其他浏览器中,或者这是Google Maps API的问题?

对不起我的英语。

0 个答案:

没有答案