*版主,请不要删除这篇文章,我知道这是重复的,所以以下是我的论点:我已经浏览了几个论坛(包括 stackoverflow 和 google 论坛等)并查看了过去 3 中类似问题的许多帖子小时,但仍然找不到任何解决方案。我是一个新程序员,还有很多东西要学。当我打开地图并且标记也显示时,我的谷歌地图 v3 设法加载,但问题是当地图从服务器接收新位置以在地图上显示为标记时,会发生错误:
Line 29,
Unable to get value of the property 'offsetWidth': object is null or undefined
url: http://maps.gstatic.com/intl/fr_fr/mapfiles/api-3/13/2/main.js
我按照谷歌官方文档中的步骤操作,但仍然遇到这个问题。下面是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8" />
<title>Ma Page de Google Maps</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 3; padding: 3}
#map_canvas { height: 100%}
</style>
<style type="text/css">
.tooltip {
background-color:#ffffff;
font-weight:bold;
border:2px #006699 solid; }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
//Creation de Map
// Variables globales
// ------------------
// Enable the visual refresh
google.maps.visualRefresh = true;
var map = null;
var Table_Pins = {}; // Liste des Pins affichées
var Pos_Info = null; // Dit sur quel marker se situe l'infobulle
var Liste_Points = []; // Pour la mémorisation du tracé
var route = null;
var markers = [];
var _this = this;
//-----------------------------------------------------------------
function initialize()
{
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(43.665, 7.052),
mapTypeId: google.maps.MapTypeId.ROADMAP, //Type de carte
mapTypeControl: true,
panControl: true,
zoomControl: true, //Zoom
scaleControl: true, //Echelle
scaleControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM},
streetViewControl: true
} ;
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
//------------------------
// Ouverture du WebBrowser
// -----------------------
try { google.maps.event.addDomListener(window, 'load', initialize);}
catch (ex){ alert("vous devez etre connecte a l'internet...");}
// ------------------------------------------------------------------------------------
// Affichage des véhicules
// ------------------------------------------------------------------------------------
var myPin =[];
var infowindow;
function Affiche_Pin(Lat, Long, immat, type, site, vitesse, date)
{ myPin = Table_Pins[immat];
var myPinhtml = '<b style="color:green">Véhicule : ' + immat + ' ' + '</b><br>' +
'Site : ' + site + '<br>' +
'Type : ' + type + '<br>' +
'Vitesse : ' + vitesse + ' km/h' + '<br>' +
'Date : ' + date + '<br>';
if (typeof myPin != "undefined")
{
// La Pin est déja placée, on la déplace
// -------------------------------------
myPin.setPosition(new google.maps.LatLng(Lat, Long))
map = new google.maps.Map(document.getElementById('map'));
map.setCenter(new google.maps.LatLng(Lat, Long));
map.setZoom(12);
if (Pos_Info == myPin)
{
infowindow = new google.maps.InfoWindow({
content: myPinhtml,
position: new google.maps.LatLng(Lat, Long) });
infowindow.open(map, myPin);
} //end if (pos_info)
}//end if (mypin)
else{
// -------------------------------
// Création de la Pin et placement
// -------------------------------
var imageMarqueur = new google.maps.MarkerImage('http://maps.google.com/mapfiles/kml/pal4/icon15.png',
new google.maps.Size(32, 32),
new google.maps.Point(0,0),
new google.maps.Point(16, 32));
var ombreMarqueur = new google.maps.MarkerImage('http://maps.google.com/mapfiles/kml/pal4/icon15s.png',
new google.maps.Size(56, 32),
new google.maps.Point(0,0),
new google.maps.Point(16, 32));
var vehlatlng = new google.maps.LatLng(Lat, Long) ;
var marker = new google.maps.Marker({
map: map,
position: vehlatlng,
icon: imageMarqueur,
shadow: ombreMarqueur });
infowindow = new google.maps.InfoWindow({
content: myPinhtml,
position: vehlatlng });
markers.push(marker);
marker.setMap(map);
// Evenement "Click" et "infowindowopen" du marker
// ---------------------------
google.maps.event.addListener(marker, 'click', function() {
if(lastOpenInfoWin) lastOpenInfoWin.close();
lastOpenInfoWin = infowindow;
infowindow.open(marker.get('map'), marker);
Pos_Info = marker;});
Table_Pins[immat] = marker;
}//end else
}//end function affiche_pin
// ------------------------------------------------------------------------------------
// On centre le véhicule
// ------------------------------------------------------------------------------------
function Centrer_Pin(immat) {
var myPin = Table_Pins[immat];
if (typeof myPin != "undefined")
{ infowindow.close();
map.setZoom(14);
map.setCenter(myPin.getPosition());
infowindow.open(map, myPin);
google.maps.event.addListener(myPin, 'position_changed', function() {
map.panTo(myPin.getPosition());
});
google.maps.event.addListener(map, 'zoom_changed', function() {
infowindow.close();});
}
}
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
先感谢您。