http://dev.epicwebdesign.ca/emco/assets/mapping.php
它作为 iFrame 加载到 http://dev.epicwebdesign.ca/emco/?page=dealerlocator 中。
由于某种原因，该 map 不会出现在 Internet Explorer 中。没有 (JS) 错误消息。我已经尝试了我能找到的一切，甚至删除了行尾的几个无关的逗号。
如果我使用开发人员工具手动将 div 高度设置为 500px，它会一直工作，直到我再次搜索并重置为止。内部 div 并不总是出现。
内部div的高度为100%。 map_canvas 高度为 550px。内部 div 不应该填充它而不是 0px 高吗？
这仅适用于 Internet Explorer。 Google 代码上没有类或 id，所以我不能强制它。
这是same behaviour 。该修复在 3.3 到 3.8 中均无效。
我现在已经用完了 Google-fu，现在是凌晨 4:44。有什么想法吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>Markers</title>
<link rel="stylesheet" type="text/css" href="../css/normalize.css" />
<?php
$a = ''; $b = ''; $c='';
$btext='';
function validateCanadaZip($zip_code)
{
$zip_code = strtoupper($zip_code);
$zip_code = str_replace(" ", "", $zip_code);
$zip_code = str_replace("-", "", $zip_code);
$count = count($zip_code);
if(strlen($zip_code) != 6) {
return array(false, $zip_code);
}
if(preg_match("/^([a-ceghj-npr-tv-z]){1}[0-9]{1}[a-ceghj-npr-tv-z]{1}[0-9]{1}[a-ceghj-npr-tv-z]{1}[0-9]{1}$/i",$zip_code))
return array(true, $zip_code[0].$zip_code[1].$zip_code[2]." ".$zip_code[3].$zip_code[4].$zip_code[5]);
else
return array(false, $zip_code);
}
if (isset($_POST['submit'])){
if (isset($_POST['location']))
{
$zipcode = $_POST['location'];
$result = validateCanadaZip($zipcode);
if ($result['0']) {
} else {
print $_POST['location'] ." is not a valid Postal Code";
}
}
$host = "removed";
$user = "removed";
$pass = "removed";
$dbnm = "removed";
$conn = mysql_connect ($host, $user, $pass);
if ($conn) {
$buka = mysql_select_db ($dbnm);
if (!$buka) {
die ("Database Not Found");
}
} else {
notify("Fatal Error. Can not connect to Database", "");
}
$radius = $_POST['radius'];
$selected="selected=\"selected\"";
if ($radius == 10) $a=$selected;
else if ($radius == 25) $b=$selected;
else if ($radius == 50) $c=$selected;
else if ($radius == 100) $d=$selected;
$address = str_replace(" ", "+", $result[1]);
$url= 'http://maps.googleapis.com/maps/api/geocode/json?address='.$address.'&sensor=false';
$data = @file_get_contents($url);
$jsondata = json_decode($data,true);
if(is_array($jsondata )&& $jsondata ['status']=="OK"){
$lat = $jsondata['results'][0]['geometry']['location']['lat'];
$lng = $jsondata['results'][0]['geometry']['location']['lng'];
}
else echo "didnt get in";
$query1 = "SELECT name, address, city, prov, postalcode, phone, showroom, lat, lng, ( 6371 * ACOS( COS( RADIANS( $lat ) ) * COS( RADIANS( lat ) ) * COS( RADIANS( lng ) - RADIANS( $lng ) ) + SIN( RADIANS( $lat ) ) * SIN( RADIANS( lat ) ) ) ) AS distance FROM dealers HAVING distance <$radius ORDER BY showroom desc, distance LIMIT 0, 6";
$data = mysql_query($query1) or die("A MySQL error has occurred.<br />Your Query: " . $your_query . "<br /> Error: (" . mysql_errno() . ") " . mysql_error());
?>
<?php
$btext = '<table width="100%" cellspacing="0" cellpadding="0" id="dealers">';
// set up the arrays
$n = 0;
while($info = mysql_fetch_array( $data ))
{
${'latlng'.$n} = array(
"lat" => addslashes ($info['lat']),
"lng" => addslashes ($info['lng']),
"name" => ucwords(strtolower(addslashes ($info['name']))),
"address" => addslashes ($info['address']),
"city" => addslashes ($info['city']),
"province" => addslashes ($info['prov']),
"postalcode" => addslashes ($info['postalcode']),
"phonenumber" => addslashes ($info['phone']),
"dist" => round($info['distance'],2),
"showroom" => addslashes ($info['showroom'])
);
$info['showroom']?$bg="#DDD":$bg="";
$info['showroom']?$sr="*":$sr="";
$btext.= '<tr style="background:'.$bg.';">';
$btext.= '<td>';
$btext.= '<a href="javascript:void(0)" class="sidebar" id="row'.$n.'" ><span>'.$sr.ucwords(strtolower($info['name']))."</span></a>";
$btext.= '</td>';
$btext.= '<td>';
$btext.= ucwords(strtolower($info['address']));
$btext.= '<br>';
$btext.= ucwords(strtolower($info['city'])).", ".strtoupper($info['prov']);
$btext.= '<br>';
$btext.= $info['phone'];
$btext.= '</td>';
$btext.= '</td>';
$btext.= '</tr>';
$n++;
}
$btext.= '</table>';
$btext.= '*Come visit our showroom';
function getlatlng($array){
echo $array["lat"].",".$array["lng"];
}
function getmarkertext($array){
echo "'<div id=\"boxcontent\">'+
'<div id=\"siteNotice\">'+
'</div>'+
'<h2 id=\"firstHeading\" class=\"firstHeading\">".$array["name"]."</h2>'+
'<div id=\"bodyContent\">'+
'<p>".ucwords(strtolower($array['address']))."<br>".$array["city"].", ".
$array["province"]."<br>".
$array["postalcode"]."<br>".
$array["phonenumber"]."<br>"."</p>'+
'</div>'+
'</div>' ";
}
?>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
});
var markerBounds = new google.maps.LatLngBounds();
var randomPoint, i;
var infowindow = new google.maps.InfoWindow();
<?php for ($i = 0; $i < $n; $i++) {?>
randomPoint = new google.maps.LatLng(<?php getlatlng(${'latlng'.$i}); ?>);
var marker<?php echo $i ?> = new google.maps.Marker({
position: randomPoint,
map: map
});
var contentString<?php echo $i ?> = <?php getmarkertext(${'latlng'.$i}) ?> ;
google.maps.event.addListener(marker<?php echo $i ?>, 'click',
function(){
infowindow.close();//hide the infowindow
infowindow.setContent(contentString<?php echo $i ?>);//update the content for this marker
infowindow.open(map, marker<?php echo $i ?>);//"move" the info window to the clicked marker and open it
});
google.maps.event.addDomListener(document.getElementById('row<?php echo $i ?>'), 'mouseover',
function(){
infowindow.close();//hide the infowindow
infowindow.setContent(contentString<?php echo $i ?>);//update the content for this marker
infowindow.open(map, marker<?php echo $i ?>);//"move" the info window to the clicked marker and open it
map.setZoom(15);
map.setCenter(marker<?php echo $i ?>.getPosition());
});
markerBounds.extend(randomPoint);
<?php } ?>
map.fitBounds(markerBounds);
}
</script>
<?php } ?>
<style>
body, body form input, a{
background:none;
font-family:Arial, Helvetica, sans-serif;
height:100%;
text-align:justify;
color:#383838;
text-decoration:none;
text-align:left;
}
body form input{
background:#FFF;
}
#map_canvas {
height: 550px;
width:400px;
display:block;
margin:0 auto;
}
#boxcontent{
}
#firstHeading{
margin:0px;
font-size:14px;
}
#bodyContent{
font-size:12px;
}
.sidebar{
display:block;
height:59px;
width:190px;
padding:0px;
}
#dealers{
font-size:12px;
}
#dealers a:hover{
background:#eee;
}
#dealers tr td{
padding:0px;
width:200px;
margin: -10px 0px;
height:59px;
}
#dealers tr{
height:59px;
padding:0px;
}
</style>
</head>
<?php $i = isset($_POST['submit'])?"<body onload=\"initialize()\">" : "<body>";
echo $i."\n";
?>
<table cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;">
<form method='post'>
Within <select name='radius' value='50'>
<option <?php echo $a ?> value='10' >10</option>
<option <?php echo $b ?> value='25'>25</option>
<option <?php echo $c ?> value='50'>50</option>
</select>
km of
<input type='text' maxlength="7" name='location' value='<?php echo $result[1] ?>'/>
<input type='submit' name='submit' value='submit' />
</form>
<?php echo $btext ?>
</td>
<td id="map_canvas">
</td>
</tr>
</table>
</body>
</html>
最佳答案
map API 在使用表格单元格显示 map 内容时似乎出现问题。这在 Internet Explorer 中并不奇怪。只需在表格单元格内嵌套一个 id="map_canvas"的 div(并从“td”标记中删除 id)，该页面就会在 Internet Explorer 9 中显示。
因此，将 IE 设置为 IE7 模式可以使 map 正确显示，即使 map 使用表格单元格也是如此。
关于php - 谷歌地图 JS API V3 : Map won't show in Internet Explorer，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10579363/