使用谷歌地图的javascript网页不能在Android上工作

javascript webpage using Google maps doesn't work on Android

本文关键字：Android 工作 不能 网页 谷歌地图 javascript      更新时间：2023-09-26

我使用Javascript创建了一个简单的Google Maps网页。我解析一个XML文件，并在我所居住的韩国城市的地图上显示一系列标记。在windows机器上的所有浏览器上都运行良好，但当我在Android手机上访问同一页面时却完全不起作用。我得到了网页的所有html，包括菜单，广告等，但地图甚至没有显示。将电话连接到Eclipse并检查日志，但没有看到任何错误。有人知道为什么Android在显示谷歌地图页面时出现问题吗?

如果你想看代码，在这里:http://ulsanonline.com/ulsanmap.php我用来填充地图的javascript代码如下:

function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map_canvas");
  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '100%';
  } else {
    mapdiv.style.width = '600px';
    mapdiv.style.height = '800px';
  }
}
var markersArray = new Array();
var map;
function initialize() {
    var latlng = new google.maps.LatLng(35.543401,129.340954);
    var myOptions = {
      zoom: 12,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    detectBrowser();
    var dine_image = new google.maps.MarkerImage(
      '/Maps/dine.png',
      new google.maps.Size(50,50),
      new google.maps.Point(0,0),
      new google.maps.Point(25,50)
    );
    var drink_image = new google.maps.MarkerImage(
      '/Maps/drink.png',
      new google.maps.Size(50,50),
      new google.maps.Point(0,0),
      new google.maps.Point(25,50)
    );
    var shadow = new google.maps.MarkerImage(
     '/Maps/shadow.png',
     new google.maps.Size(78,50),
     new google.maps.Point(0,0),
     new google.maps.Point(25,50)
    );

   // read the xml file
   if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
   }
   else  {// code for IE6, IE5
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.open("GET","/uoplaces.xml",false);
   xmlhttp.send();
   xmlDoc=xmlhttp.responseXML; 
   xml=xmlDoc.getElementsByTagName("place");
   // parse xml
   for (i=0; i < xml.length; i++) {
       var name = xml[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
       var type = xml[i].getElementsByTagName("name")[0].getAttribute("category");
       var link = xml[i].getElementsByTagName("link")[0].childNodes[0].nodeValue;
       var lat = xml[i].getElementsByTagName("lat")[0].childNodes[0].nodeValue / 1000000;
       var long = xml[i].getElementsByTagName("long")[0].childNodes[0].nodeValue / 1000000;

       var contentString = '<div id="content">'+
         '<h1 id="firstHeading" class="firstHeading">' + name + '</h1>'+
         '<a href=' + link + '>' + 'More Info' + '</a>'+
         '</div>';

       var infowindow = new google.maps.InfoWindow();
       var myLatlng = new google.maps.LatLng(lat,long);
       if (type == "restaurant") {
      var marker = new google.maps.Marker({
             position: myLatlng,
             map: map,
             type: type,
             icon: dine_image,
             shadow: shadow,
          html: contentString
      });
   }
   else {
      var marker = new google.maps.Marker({
         position: myLatlng,
         map: map,
         type: type,
         icon: drink_image,
         shadow: shadow,
         html: contentString
          });
       }
       google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(this.html);
            infowindow.open(map, marker);
          }
       })(marker, i));
       markersArray.push(marker);
    } // parse
    for (i in markersArray) {
      markersArray[i].setMap(map);
    }
} //end function initialize

// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}
// Shows any overlays currently in the array
function showOverlays(category) {
  if (markersArray) {
    for (i in markersArray) {
      if (markersArray[i].type == category) {
         markersArray[i].setMap(map);
      }
    }
  }
}

我实际上已经创建了一个Android应用程序使用相同的GoogleMaps API，数据和目的，它也工作得很好。这只是Android浏览器或Android上的Firefox不起作用，这使我认为它可能是在initialize()函数中完成的XMLHTTPREQUEST。

任何想法?

你试过包括这些元标签吗?

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

EDIT:

你的网页可以在Android 4.0.3上运行。你添加了一些代码，虽然我看到

function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map_canvas");
  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
    mapdiv.style.width = '480px';
    mapdiv.style.height = '600px';

  var parent = document.getElementById('templatemo_container');
    var nastylogo = document.getElementById('templatemo_top_panel');
    parent.removeChild(nastylogo);

  } else {
    mapdiv.style.width = '600px';
    mapdiv.style.height = '800px';
  }
}

虽然行"parent.removeChild(nastylogo);"抛出"Uncaught Error: NOT_FOUND_ERR: DOM Exception 8"

如果有人遇到这种情况，问题出在我的CSS上。我设置了iPhone或Android的%，但没有设置大小。如果我使用的是台式机/笔记本电脑浏览器，则设置了大小，但如果我使用的是手机浏览器，则设置了未设置的%，则无法在map_canvas上进行绘制。

相关文章：