API карт Google v3 не работает в IE - PullRequest
0 голосов
/ 09 августа 2011

Для начала я довольно плохо знаком с Javascript и API Карт Google, поэтому любая помощь будет принята с благодарностью.

Я строю карту с полигонами, чтобы отметить границы границ и возможность поиска адреса, чтобы увидеть, в каком полигоне находится адрес. Код работает как для Firefox, так и для Chrome, но по какой-то причине, когда я пытаюсь найти адрес в IE, карта просто перезагружается, а не размещает маркер в соответствующем месте.

Я включил все функции, которые я использую. Функция Javascript microajax используется для чтения 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;
}

Ответы [ 3 ]

0 голосов
/ 09 августа 2011

Попробуйте избавиться от формы и вместо этого установите onClick 'Go!'кнопка, чтобы показать адрес ().Я протестировал это в IE7, Chrome и Firefox, и это сработало.

0 голосов
/ 01 апреля 2015

Попробуйте указать версию

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

Вы получаете экспериментальную версию, если не указали версию. Я обнаружил, что экспериментальная версия имеет проблемы с IE11

0 голосов
/ 09 августа 2011

Вы можете попробовать использовать jQuery для запуска кода инициализации и для ajax.Вместо использования body.onload используйте это:

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

А для ajax:

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

Если проблема заключается в том, что ваша форма отправляется на сервер и вызывает перезагрузку страницы,вам нужно вернуть false из функции showAddress () и использовать 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 ;
}
...