0

すべての適切なブラウザーで正常に動作する小さな Google マップ v3 スクリプトがありますが、IE に遭遇すると、使用するイベント ハンドラーや属性の記述方法に関係なく、「オブジェクトが必要です」というエラーが発生します。ヘルプ！

スクリプトは次のとおりです。

function include(filename)
{
    var head = document.getElementsByTagName('head')[0];

    script = document.createElement('script');
    script.src = filename;
    script.type = 'text/javascript';

    head.appendChild(script)
}


include('geoxml3.js');
include('v3_epoly.js');

  var geoXml = null;
    var map = null;
    var geocoder = null;
    var toggleState = 1;
    var infowindow = null;
    var marker = null;
    var Ploc = null;
    var directionDisplay;
    var directionsService = new google.maps.DirectionsService();
//Voting Locations: Array element id = voting pct!
    var Vloc = new Array();
        Vloc[1] = 's';
        Vloc[2] = 's';
        Vloc[3] = 's';
        Vloc[4] = 's';


 function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();  
    geocoder = new google.maps.Geocoder();
    infowindow = new google.maps.InfoWindow({size: new google.maps.Size(150,50) }); 
    var latlng = new google.maps.LatLng(32.5890, -96.308871);

    var myOptions = {
      zoom: 10,
      center: latlng,
      mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }


     map = new google.maps.Map(document.getElementById('map_canvas'),
        myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directionsPanel')); 
    geoXml = new geoXML3.parser({
        map: map,
        suppressInfoWindows: true,
        polygonOptions: {clickable: false}, 
        });
    geoXml.parse('qvote.kml');
    // exml = new EGeoXml({map: map, singleInfoWindow: true, createpolygon: createPoly});
  }

function showAddress(address) {
    var contentString = '';
    Ploc = null;
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
      var point = results[0].geometry.location;
          map.setCenter(point);
          if (marker && marker.setMap) marker.setMap(null);
          marker = new google.maps.Marker({
              map: map, 
              position: point
          });
        for (var i=0; i<geoXml.docs[0].gpolygons.length; i++) {
          if (geoXml.docs[0].gpolygons[i].Contains(point)) {
            contentString = address+'<br>'+geoXml.docs[0].placemarks[i].name;
    //      contentString += '<br>'+point+'<br>polygon#'+i;
            Ploc = geoXml.docs[0].placemarks[i].name;
            i = 999; // Jump out of loop
          }
        }

        google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        if (Ploc) calcRoute(address);
        });
    google.maps.event.trigger(marker,'click');
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
}
function calcRoute(addy) {
  var start = addy;
  var end = Vloc[parseInt(Ploc)];
  var request = {
    origin:start, 
    destination:end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

ページはここにあります：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script defer="defer" type="text/javascript" src="calvoteroute.js"></script>
<title>Voter Map</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<style type="text/css"> 
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
.bla {
    font-family: Verdana, Geneva, sans-serif;
}
</style>
</head>
<body onLoad='initialize()'>

<div><img src="img/pollingbanner.png" width="663" height="126"/></div>
<div><form action="#" onsubmit="showAddress(this.address.value); return false;" style="height:100%; width:100%; padding:0px 0px 0px 0px; background:none;"> 
    <p>
      <label class="bla">Enter the voter's address to find location:</label> 

      <input type="text" size="40" name="address" value="3003 S. Washington, Kaufman TX 75142" class="address" /> 
    <input type="submit" value="Go Vote!"/>
    <br />
    Scroll below to see the current Polling locations
</form></div>
<div style="width: 100%; display: table;">
    <div style="display: table-row">
        <div id="map_canvas" style="width:663px; height:600px; display: table-cell;"></div>
        <div id="directionsPanel" style="width: 200px; height: 600px; display: table-cell;"></div>    
        </div>
</div>

</body> 
</html>
4

2 に答える 2

2

マップへのリンクにより、問題がどこにあるかがわかります (IE のデバッガーを使用しても)。

推測。IE は、配列の末尾に null オブジェクトを追加し、末尾に「ハンギング カンマ」(後に何もないカンマ) を持つ無名オブジェクトを追加します。ここにあるように：

geoXml = new geoXML3.parser({
    map: map,
    suppressInfoWindows: true,
    polygonOptions: {clickable: false},   <----------------- bad in IE...
    });

それが問題または唯一の問題ではないかもしれませんが、IE で問題が発生します。

于 2012-07-06T05:37:53.160 に答える
0

私は次のようにイベントを処理しました: google.setOnLoadCallback(initialize);IE 8/9 で問題なく表示されます。

于 2012-07-10T18:05:16.587 に答える