0

我正在从 Google Maps V2 更新到 V3：

V2：http ://www.fortwayne2030.org/clubloc.html

V3：http ://www.fortwayne2030.org/clublocv3.html

我为第 3 版所做的更新似乎在 Google Chrome 中运行良好。但是，我似乎无法让信息窗口出现在 IE9 中。这与我将代码分离到单独的 .js 文件这一事实有关吗？

我的 clublocv3.html 看起来像这样：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>A2030 Map</title>
    <link rel="stylesheet" href="includes/a2030style.css"> 
    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript>
        <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript">
        </script>
        <script type="text/javascript" src="includes/a2030gmapv3.js"></script>
    </head>
    <body onload="initialize()">
        <table>
            <tr><th>Active 20-30 Map</th><th>Clubs</tr>
            <tr>
                <td>
                    <div id="map_canvas" style="width: 712px; height: 400px"></div>
                </td>
                <td>
                    <div id="side_bar"/>
                </td>
            </tr>
        </table>
    </body>
</html>

这是 a2030gmapv3.js：

// Variables
var map;
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });
var side_bar_html = "";
// array to hold copies of the markers used by the side_bar
var gmarkers = [];

// Main init function
function initialize() {

  var mapOptions = {
    center: new google.maps.LatLng(38.6, -100), zoom: 4, mapTypeId: google.maps.MapTypeId.ROADMAP
  };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  var2030Icon = new google.maps.MarkerImage('images/a2030Pointer01.png',new google.maps.Size(26, 37));
  var2030FormingIcon = new google.maps.MarkerImage('images/a2030Pointer02F.png',new google.maps.Size(26, 37));

  downloadUrl("includes/a2030USClubLoc.xml", function(data) {
    //Active Clubs
    var markers = data.documentElement.getElementsByTagName("marker");
    side_bar_html = "<b>United States</b><br/><ul>";
    for (var i = 0; i < markers.length; i++) {
      var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                              parseFloat(markers[i].getAttribute("lng")));
      var label = markers[i].getAttribute("label");
      var html = markers[i].getElementsByTagName("infowindow")[0].textContent;
      var marker = createMarker(latlng,label,html,var2030Icon,map);
    }
    side_bar_html += "</ul><br/>";
    //Clubs in formation
    var markersforming = data.documentElement.getElementsByTagName("markerforming");
    side_bar_html += "<br/><b>United States Clubs in Formation</b><br/><ul>";
    for (var i = 0; i < markersforming.length; i++) {
      var latlng = new google.maps.LatLng(parseFloat(markersforming[i].getAttribute("lat")),
                              parseFloat(markersforming[i].getAttribute("lng")));
      var label = markersforming[i].getAttribute("label");
      var html = (markersforming[i].getElementsByTagName("infowindow")[0]).textContent;
      var marker = createMarker(latlng,label,html,var2030FormingIcon,map);
    }
    side_bar_html += "</ul><br/>";
            // put the assembled side_bar_html contents into the side_bar div
      document.getElementById("side_bar").innerHTML = side_bar_html;
  }
  );

} // end initialize

// A function to create the marker and set up the event window
function createMarker(mypoint,mylabel,myhtml,myicon,mymap) {
  var marker = new google.maps.Marker({
    position: mypoint,
    map: mymap,
    title: mylabel,
    icon: myicon
  });
  // save the info we need to use later for the side_bar
  gmarkers.push(marker);
  google.maps.event.addListener(marker, "click", function() {
    if (infowindow) infowindow.close();
    infowindow = new google.maps.InfoWindow({content: myhtml});
    infowindow.open(mymap, marker);
  });
  // add a line to the side_bar html
  side_bar_html += '<li><a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + mylabel + '<\/a></li>';
  return marker;
}

function myclick(i) {
  google.maps.event.trigger(gmarkers[i], 'click');
}

google.maps.event.addDomListener(window, 'load', initialize);


/**
The below functions have been copied from util.js for XML parsing, file provided by Google:
http://gmaps-samples-v3.googlecode.com/svn/trunk/xmlparsing/
*/

/**
* Returns an XMLHttp instance to use for asynchronous
* downloading. This method will never throw an exception, but will
* return NULL if the browser does not support XmlHttp for any reason.
* @return {XMLHttpRequest|Null}
*/
function createXmlHttpRequest() {
 try {
   if (typeof ActiveXObject != 'undefined') {
     return new ActiveXObject('Microsoft.XMLHTTP');
   } else if (window["XMLHttpRequest"]) {
     return new XMLHttpRequest();
   }
 } catch (e) {
   changeStatus(e);
 }
 return null;
};

/**
* This functions wraps XMLHttpRequest open/send function.
* It lets you specify a URL and will call the callback if
* it gets a status code of 200.
* @param {String} url The URL to retrieve
* @param {Function} callback The function to call once retrieved.
*/
function downloadUrl(url, callback) {
 var status = -1;
 var request = createXmlHttpRequest();
 if (!request) {
   return false;
 }

 request.onreadystatechange = function() {
   if (request.readyState == 4) {
     try {
       status = request.status;
     } catch (e) {
       // Usually indicates request timed out in FF.
     }
     if (status == 200) {
       callback(request.responseXML, request.status);
       request.onreadystatechange = function() {};
     }
   }
 }
 request.open('GET', url, true);
 try {
   request.send(null);
 } catch (e) {
   changeStatus(e);
 }
};

/**
 * Parses the given XML string and returns the parsed document in a
 * DOM data structure. This function will return an empty DOM node if
 * XML parsing is not supported in this browser.
 * @param {string} str XML string.
 * @return {Element|Document} DOM.
 */
function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}

/**
 * Appends a JavaScript file to the page.
 * @param {string} url
 */
function downloadScript(url) {
  var script = document.createElement('script');
  script.src = url;
  document.body.appendChild(script);
}

有谁知道为什么 IE9 不能像 Chrome 一样显示信息窗口？当我转到代码就在同一个 HTML 文件中的示例时，Infowindows 确实显示在 IE9 中。我希望避免这种情况并保留单独的 .js 文件。对于如何为 IE9 注册它以及尽可能多的跨浏览器支持，我们将不胜感激。

我是新手，所以我现在只能发布 2 个超链接……但我认为如果您需要 XML 数据，可以从 fortwayne2030.org/includes/a2030USClubLoc.xml 获取

4

2 回答 2

0

在 a2030gmapv3.js 的第 31 行和第 41 行更改您的代码：

第 31 行：

var infoNode = markers[i].getElementsByTagName("infowindow")[0];
var html = "textContent" in infoNode ? infoNode.textContent : infoNode.text;

第 41 行：

var infoNode = markersforming[i].getElementsByTagName("infowindow")[0];
var html = "textContent" in infoNode ? infoNode.textContent : infoNode.text;
于 2012-11-28T21:38:46.650 回答
0

此行在 IE 中不起作用：

      var html = markers[i].getElementsByTagName("infowindow")[0].textContent;

所以 InfoWindow 没有内容（显然这意味着它没有打开）

于 2012-11-28T22:52:26.103 回答