0
首先，我對Javascript和Google Maps API相當陌生，所以任何幫助都將不勝感激。谷歌地圖API v3在IE中不工作
我正在構建一個包含多邊形的地圖來標記邊界位置以及搜索地址以查看地址所處的多邊形的能力。該代碼適用於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;
}
感謝您的回覆。我從表單中刪除了onsubmit和action元素，並按照你所說的設置了onclick，但它沒有奏效。我最終完全刪除了表單，並將輸入字段放在「div」標記中。乾杯。 – Dayo