根据一个老话题,这个问题应该在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的问题?
对不起我的英语。