谷歌地图API v3在IE中不起作用

Question

首先，我对Javascript和Google Maps API并不陌生，因此将不胜感激。

我正在构建一个带有多边形的地图，以标记边界位置，并能够搜索地址以查看该地址所在的多边形。该代码适用于Firefox和Chrome，但是由于某些原因，当我尝试在IE中搜索地址时，地图只会重新加载，而不是将标记放置在适当的位置。

我已经包含了我使用的所有功能。 microajax Javascript函数用于读取包含所有多边形形状的坐标的xml文件。 由于多边形是在IE中呈现的，因此我不认为这是问题的原因，因此我没有将其包括在内。 我不知所措。 提前致谢。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="microajax.js"></script>


<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 30px; padding: 0px }
#map_canvas { height: 100% }
</style>

<div id="map_canvas" style="width:800px; height:600px" text="If map is not present, this browser does not support Google Maps"></div>           

<div id="message"></div>    

<form onsubmit="showAddress()" action="#">
  <input id="search" size="60" type="text" value="" />
  <input type="submit" value="Go!" />
  <input type="button" onclick="clearmarkers();" value="Clear markers" />
</form>

</head>

<body onload="initialize()">

<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 type="text/javascript">

 var gmarkers = [];
var polys = [];
var labels = [];
var glob;
var geo = new google.maps.Geocoder();
var map;  

function initialize() {           

  var ontario = new google.maps.LatLng(50.397, -85.644);
  var myOptions = {
    zoom: 5,
    center: ontario,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  microAjax("xmloutput2.xml", function(data) {
  // ========= processing the polylines ===========
  var xmlDoc = xmlParse(data)
  var lhins = xmlDoc.documentElement.getElementsByTagName("lhin");
  // read each line        
  for (var a = 0; a < lhins.length; a++) {           
    var label  = lhins[a].getAttribute("name");
    var colour = lhins[a].getAttribute("colour");
    // read each point on that line
    var points = lhins[a].getElementsByTagName("point");
    var pts = [];
    for (var i = 0; i < points.length; i++) {
      pts[i] = new google.maps.LatLng(parseFloat(points[i].getAttribute("lat")), parseFloat(points[i].getAttribute("lng")));                  
    }
    var poly = new google.maps.Polygon({
      paths:pts,
      strokeColor:"#000000",
      strokeOpacity: 1,
      strokeWeight: 2,
      fillColor: colour,
      fillOpacity: 0
    });
    poly.setMap(map);
    polys.push(poly);
    labels.push(label);   
    }


 function showAddress() {
  var search = document.getElementById("search").value;
  geo.geocode( { 'address': search}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
    // How many results were found
      document.getElementById("message").innerHTML = "Found " +results.length +" results";
      // Loop through the results, placing markers          
      for (var i=0; i<results.length; i++) {                                           
        var marker = new google.maps.Marker({
          map: map,
          position: results[i].geometry.location 
        });
        gmarkers.push(marker);
        glob=checkpoint(marker);                      
        if (glob == 99) {
          var infowindowoptions = {
            content: 'This address is not within a LHIN boundary'
          }
          infowindow = new google.maps.InfoWindow(infowindowoptions);

          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, this);
          });                          
          document.getElementById("message").innerHTML += "<br>"+(i+1)+": "+ results[i].formatted_address +" "+ results[i].geometry.location +              "Outside of Bounds";
        }
        else {
          var infowindowoptions = {
            content: 'This address is in LHIN '+labels[glob]
          }
          infowindow = new google.maps.InfoWindow(infowindowoptions); 

          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, this);
          });                          
          document.getElementById("message").innerHTML += "<br>"+(i+1)+": "+ results[i].formatted_address +" "+ results[i].geometry.location + 
          " - LHIN "+(glob+1)+"  "+labels[glob];
        }              
      }
      map.setCenter(results[0].geometry.location);
      map.setZoom(17)                 
    }  
    else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

function clearmarkers() {
  if (gmarkers) {
    for (i in gmarkers) {
      gmarkers[i].setMap(null);
    }
  gmarkers.length = 0;
  }
}


function checkpoint(marker) {
  var LNum;
  var point = marker.getPosition();
  for (var i=0; i<polys.length; i++) {        
    if (polys[i].containsLatLng(point)) {
          Lnum = i;
          i = 999; // Jump out of loop
          }
        else {
          Lnum = 99
        }
    }
    return Lnum
};

// Polygon getBounds extension - google-maps-extensions
// http://code.google.com/p/google-maps-extensions/source/browse/google.maps.Polygon.getBounds.js
if (!google.maps.Polygon.prototype.getBounds) {
  google.maps.Polygon.prototype.getBounds = function(latLng) {
  var bounds = new google.maps.LatLngBounds();
  var paths = this.getPaths();
  var path;

  for (var p = 0; p < paths.getLength(); p++) {
    path = paths.getAt(p);
    for (var i = 0; i < path.getLength(); i++) {
      bounds.extend(path.getAt(i));
    }
  }

  return bounds;
  }
}

// Polygon containsLatLng - method to determine if a latLng is within a polygon
google.maps.Polygon.prototype.containsLatLng = function(latLng) {
// Exclude points outside of bounds as there is no way they are in the poly
var bounds = this.getBounds();

if(bounds != null && !bounds.contains(latLng)) {
  return false;
}

// Raycast point in polygon method
var inPoly = false;

var numPaths = this.getPaths().getLength();
for(var p = 0; p < numPaths; p++) {
  var path = this.getPaths().getAt(p);
  var numPoints = path.getLength();
  var j = numPoints-1;

  for(var i=0; i < numPoints; i++) {
    var vertex1 = path.getAt(i);
    var vertex2 = path.getAt(j);

    if (vertex1.lng() < latLng.lng() && vertex2.lng() >= latLng.lng() || vertex2.lng() < latLng.lng() && vertex1.lng() >= latLng.lng()) {
      if (vertex1.lat() + (latLng.lng() - vertex1.lng()) / (vertex2.lng() - vertex1.lng()) * (vertex2.lat() - vertex1.lat()) < latLng.lat()) {
        inPoly = !inPoly;
      }
    }

    j = i;
  }
}

return inPoly;
}

Answer 1

尝试指定版本

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.19"></script>

如果未指定版本，则将获得实验版本。 我发现实验版的IE11有问题

Answer 2

您可能想尝试使用jQuery来运行您的初始化代码和ajax。 代替使用body.onload，使用以下命令：

$(function(){
  initialize();
}) ;

对于ajax：

$.ajax({
  url: "xmloutput2.xml",
  success: function(data){
     // handle result
  }
});

如果问题是您的表单正在提交到服务器并导致页面重新加载，则需要从showAddress（）函数返回false，并使用onsubmit =“ return showAddress（）;”：

<form onsubmit="return showAddress();" action="#">
    <input id="search" size="60" type="text" value="" />
    <input type="submit" value="Go!" />
    <input type="button" onclick="clearmarkers();" value="Clear markers" />
</form>

...

function showAddress () {
    ....
    return false ;
}

Answer 3

尝试摆脱表单，而是设置“开始！”的onClick 按钮显示showAddress（）。 我在IE7，Chrome和Firefox中对此进行了测试，并且可以正常工作。

谷歌地图API v3在IE中不起作用

问题描述

3 个解决方案

解决方案1
0 2015-03-31 23:39:23

解决方案2
0 2011-08-09 14:50:47

解决方案3
0 已采纳 2011-08-09 15:15:31

谷歌地图API v3在IE中不起作用

问题描述

3 个解决方案

解决方案1 0 2015-03-31 23:39:23

解决方案2 0 2011-08-09 14:50:47

解决方案3 0 已采纳 2011-08-09 15:15:31

解决方案1
0 2015-03-31 23:39:23

解决方案2
0 2011-08-09 14:50:47

解决方案3
0 已采纳 2011-08-09 15:15:31