0
Google지도 팝업 풍선에 그림을 넣으려는 중이고 이미지를 놓으려고하면 오른쪽 하단으로 끝납니다. 나는 그것이 타이틀 아래에서 맨 위에 있기를 바랍니다. 나는 도움을주는 코드와 이미지를 제공했다. 
google maps의 이미지 배치 거품
<?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);
?>
여기에 자바 스크립트 파일
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>
[이미지가 팝업 풍선에서 의도 한 곳에 나타나지 않습니다.] (http://stackoverflow.com/questions/9372592/image-is-not-appearing-where-i-intended-in-the- pop-ballon) –
그냥 AAH 로고가 엉망이거나 아니면 AAL입니까? 나는 AAH에'float : top'을 보았습니다 만,'float' 속성에 대한 그 값은 유효하지 않습니다. 두 가지 모두 엉망이된다면 문제가 될 수 없습니다. – Rick
내가 배치 한 모든 로고가 엉망이되었습니다. – David