0
私はGoogleマップのポップアップバルーンに画像を配置しようとしています。画像を配置しようとすると、右下隅に画像が表示されます。私はタイトルの下で一番上になることを願っています。私は助けになるコードとイメージを提供しました。ここで
Googleマップで画像を配置するバブル
<?php
error_reporting(1);
$a = array(
"EAFS"=>"Andras Field"
);
$f = file_get_contents("http://virtual-aviation.org/whazzup/whazzup.txt");
if ($f) {
$f = substr($f,strpos($f,"!CLIENTS")+10);
$f = substr($f,0,strpos($f,"!SERVERS")-1);
$lines = explode("\n",$f);
if (count($lines)) {
foreach ($lines as $l) {
$e = array_map("htmlspecialchars",explode(":",$l));
//Begin Airline List
//FAA ident only eg AAH = Aloha
if (strpos($e[0],'AAH') !==false){
$cs='<img style="float:top" src="http://www.virtual-aviation.org/main/map/alogos/aah.png"/>';}
if (strpos($e[0],'AAL') !==false){
$cs='<img src="http://www.virtual-aviation.org/main/map/alogos/aal.png"/>';}
//End Airline Listing
if (substr($e[0],0,8) == "!SERVERS") {
$o = array("error"=>"Issue with flight data. Try again later!");
break;
}
if ($e[3] == "ATC") {
$o["markers"][] = array(
"type"=>"atc",
"callsign"=>$e[0],
"ang"=>"",
"pos"=>array(
"x"=>$e[5],
"y"=>$e[6]
),
"list"=>$e[0],
"desc"=> '<b>Air Traffic Controller</b>'.
'<br />Callsign: '.$e[0].
'<br />Username: '.$e[1]
);
} else {
$o["markers"][] = array(
"type"=>"pilot",
"callsign"=>$e[0],
"ang"=>round($e[45],-1)%360,
"pos"=>array(
"x"=>$e[5],
"y"=>$e[6]
),
"list"=>$e[0],
"desc"=> '<b>Pilot</b>'.
'<p>'.$cs.'</p>'.
'<br />Callsign: '.$e[0].
'<br />Username: '.$e[1].
'<br />Heading: '.$e[45].
'<br />Altitude: '.(($e[7])?$e[7].' Ft':"On Ground").
'<br />Ground Speed: '.$e[8].' Knots'.
'<br />Aircraft: '.$e[9].
'<br />Destination Airport: '.(($e[13])?$e[13].(($a[$e[13]])?" (".$a[$e[13]].")":""):"Not filled").
'<br />Departure Airport: '.(($e[11])?$e[11].(($a[$e[11]])?" (".$a[$e[11]].")":""):"Not filled").
'<br />Flight Route: '.(($e[30])?$e[30]:"Not filled")
);
}
}
} else {
$o = array("error"=>"There are no connected clients.");
}
} else {
$o = array("error"=>"Failed to retrieve flight data2. Try again later!");
}
echo json_encode($o);
?>
のJavaScriptファイルの内容
function MapLabel(childmarker, label, map) {
this.childmarker = childmarker;
this.label = label;
this.div = null;
this.setMap(map);
}
function initializeLabels() {
MapLabel.prototype = new google.maps.OverlayView();
MapLabel.prototype.onAdd = function() {
var div = document.createElement("div");
div.style.background = "#FFF";
div.style.border = "1px solid #000";
div.style.position = "absolute";
div.style.display = "none";
div.style.fontSize = "x-small";
div.style.padding = "2px";
div.innerHTML = this.label;
this.div = div;
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
}
MapLabel.prototype.draw = function() {
var p = this.getProjection().fromLatLngToDivPixel(this.childmarker.position);
this.div.style.left = p.x + 15 + 'px';
this.div.style.top = p.y - 40 + 'px';
this.div.style.display = "block";
}
MapLabel.prototype.onRemove = function() {
this.div.parentNode.removeChild(this.div);
this.div = null;
}
}
function initialize() {
mapObj = new google.maps.Map(document.getElementById("mapDiv"), {
zoom: 2,
center: new google.maps.LatLng(47.651,10.7655),
mapTypeId: google.maps.MapTypeId.SATELLITE
});
$.getJSON("markers.php",function(data){
if (data == null) {
$("#notice").html("Failed to load markers file.");
} else if (data.error) {
$("#notice").html(data.error);
} else {
$.each(data.markers, function(k, marker) {
//for (var i=0; i<data.markers.length; i++) {
//var marker = data.markers[i];
var mark = new google.maps.Marker({
"position": new google.maps.LatLng(marker.pos.x,marker.pos.y),
"map": mapObj,
"icon": "markers/"+marker.type+marker.ang+".png"
});
var infowindow = new google.maps.InfoWindow({
"content": marker.desc
});
var label = new MapLabel(mark, marker.callsign, mapObj);
google.maps.event.addListener(mark, "click", function() {
if (infowindow.isopen) {
infowindow.close();
infowindow.isopen = false;
} else {
infowindow.open(mapObj,mark);
infowindow.isopen = true;
}
});
google.maps.event.addListener(infowindow, "closeclick", function() {
infowindow.isopen = false;
});
$("<div />").html(marker.list).click(function() {
mapObj.panTo(mark.position);
}).appendTo($("#clients").children("#"+marker.type));
//}
});
$("#notice").css({"width": "90%", "font-weight": "bold"}).html("<marquee>Click on aircraft for flight information | Click on Andras Field to view aircrafts in the area</marquee>");
}
$("img").hide();
});
}
$(function() {
initializeLabels();
initialize();
});
と、クライアント側のコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Map</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js.js"></script>
<script type="php" src="markers.php"></script>
<style type="text/css">
body,html,#mapDiv {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: Verdana, Arial;
font-size: small;
}
a {
color: #F00;
}
img,#notice {
position: absolute;
right: 3px;
bottom: 15px;
font-size: x-small;
color: #FFF;
}
#clients {
position: absolute;
left: 2px;
bottom: 2px;
padding: 4px;
background: #FFF;
-moz-border-radius: 3px;
}
#clients div {
cursor: pointer;
}
</style>
</head>
<body>
<div id="mapDiv"></div>
<img src="loading.gif" />
<div id="notice"></div>
<div id="clients">
<div id="atc">
<b>ATCs</b>
</div>
<div id="pilot">
<b>Pilots</b>
</div>
<br /><a href="./">Refresh Map!</a>
<br /><a href="javascript:;" onclick="mapObj.setCenter(new google.maps.LatLng(47.645,10.7555)); mapObj.setZoom(14)">Andras Field</a>
</div>
</body>
</html>
[画像は私がポップアップballonで意図した場所には表示されません]（http://stackoverflow.com/questions/9372592/image-is-not-appearing-where-i-intended-in-the-ポップアップ・バロン） –
AAHのロゴはちょうどうんざりしていますか、それともAALですか？私はAAHで 'float：top'を見ていますが、' float'プロパティの値は無効です。両方がうまくいけば、それは（唯一の）問題になることはできません。 – Rick
私がそこに置いたすべてのロゴは崩れました – David