0

Google マップ 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);
}

Chrome のように IE9 が情報ウィンドウを表示できない理由を知っている人はいますか? コードが同じ HTML ファイル内にあるサンプルに移動すると、IE9 で Infowindows が表示されます。それを避けて、別の .js ファイルを保持することを望んでいました。これを IE9 に登録する方法と、可能な限り多くのクロス ブラウザー サポートについて、助けていただければ幸いです。

私は新しいので、今は 2 つのハイパーリンクしか投稿できません...しかし、XML データが必要な場合は、fortwayne2030.org/includes/a2030USClubLoc.xml から入手できると思います。

4

2 に答える 2

0

この行は IE では機能しません:

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

そのため、InfoWindow のコンテンツはありません (明らかに、それは開かないことを意味します)。

于 2012-11-28T22:52:26.103 に答える
0

a2030gmapv3.js の 31 行目と 41 行目あたりのコードを変更します。

line31:

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

line41:

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