0
我剛從一個剛剛離開公司的高級程序員那裏收到了這個項目。這幅地圖有許多問題，其中許多問題已經解決。 現在有2個主要問題留在那裏。 1.標記位置不固定，即如果你拖動任何標記enter code here - 我需要使它們固定在它們的位置。 2.我有變焦問題（fitBounds）。我在setupOfficeMarkers（）中調用了fitBounds函數，它在地圖中的每次更改都會刷新兩次。所以，它每次都會帶來相同的拖欠和朗讀。因爲縮放任何標記是不可能的。到目前爲止，我無法找到我最適合放這個fitBounds調用的地方。谷歌地圖標記拖動和縮放地圖問題
對不起，這樣長的代碼。但我想盡最大努力解決這些問題。
非常感謝您的幫助和支持。
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
<title>iProperty</title>
<style type="text/css">
html, body { overflow: hidden; width: 100%; height: 100%;margin: 0px; padding: 0px; font-size:11px; }
label{
font-size:11px;
}
#rectangle {
position:absolute;
left:0px;
top:0px;
width:100px;
height:100px;
Z-index:102;
visibility: hidden;
font-size: 0px;
border: 1px dashed;
}
.typemenu
{
position:absolute;
left:70px;
top:10px;
width:420px;/*600*/
height:101px;/*85*/
padding:5px;
border:solid 1px #333333;
font-family:Verdana;
font-size:11px;
text-align:left;
background-color:transparent;
background-image: url(skins/default/images/menubgg.png);
}
.advmenu
{
position:absolute;
left:100px;
top:140px;
width:295px;
/*height:505px;*/
overflow:auto;
padding:5px;
border:solid 1px #333333;
font-family:Verdana;
font-size:10px;
color:#999999;
background-color:transparent;
background-image: url(skins/default/images/menubgg.png);
/*text-align:center;*/
}
#advmenu
{
/*overflow:scroll;*/
overflow:hidden;
padding: 8px 0 15px 20px;
}
#listSearchButton
{
z-index:99;
width:120px;
height:28px;
left:24px;
top:405px;
}
#streetOverlayButton
{
z-index:99;
width:120px;
left:24px;
top:451px;
}
#listSearchButton a
{
cursor:pointer;
text-decoration:underline;
color:#6699cc;
font-weight:bold;
}
#boligalogo
{
position:absolute;
right:8px;
top:30px;
cursor:pointer;
}
.box
{
position:absolute;
padding:5px;
border:solid 1px #333333;
font-family:Verdana;
font-size:11px;
color:black;
background-color:transparent;
/*background-image: url(skins/default/images/menubgg.png);*/
}
#tilesdiv
{
position:absolute;
left:24px;
top:310px;
width:22px;
height:22px;
padding:0px;
border:solid 1px #333333;
background-color:white;
z-index:99;
display:none;
}
input, select
{
font-family:Verdana;
font-size:11px;
}
.searchtxt{
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}
#loader
{
display:none;
position:absolute;
left:50%;
top:50%;
width:150px;
height:16px;
padding:0px;
}
.menuheader1 { font-weight:bold; color:black; font-size:11px; }
.menuheader2 { font-weight:bold; color:black; font-size:11px; line-height:11px; }
.menuspacer { line-height:4px; }
.imgButton { cursor:pointer; text-decoration:underline; color:#6699cc; }
#help, #helpbutton
{
top:153px;
}
#link, #linkbutton
{
top:123px;
}
#tips, #tipsbutton
{
top:183px;
}
#alertbox
{
position: absolute;
top: 0;
left: 0;
z-index: 100;
text-align: left;
}
.linklike
{
font-weight: normal;
cursor: pointer;
}
#salesinfo {background-color:white;background-image:none;line-height:14px;}
.advmenu table img { vertical-align:middle; }
.typemenu table img { vertical-align:middle; }
.box img { vertical-align:middle; }
</style>
<script type="text/javascript" src="skins/default/js/jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var mgr;
var icons = {};
var allmarkers = [];
var mapbound = '';
//function loadmap loading basic map only
function loadmap() {
//alert(zomlevel);
if(document.getElementById('boundsmap').value != ''){
var latslngs = document.getElementById('boundsmap').value.substring(1,document.getElementById('boundsmap').value.length - 1);
//alert(latslngs);
var latslngsarr = latslngs.split(',');
if(latslngsarr.length == 2){
var lats = latslngsarr[0];
var lngs = latslngsarr[1];
}else{
var lats = 55.83831352210821;
var lngs = 10.283203125;
}
}else{
var lats = 55.83831352210821;
var lngs = 10.283203125;
}
var myOptions = {
zoom: parseInt(zomlevel),
//zoom: 8,
maxZoom:8,
center: new google.maps.LatLng(lats,lngs),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//alert(myOptions);
map = new google.maps.Map(document.getElementById('map'), myOptions);
mgr = new MarkerManager(map,{maxZoom:32});
google.maps.event.addListener(mgr, 'loaded', function(){
google.maps.event.addListener(map, 'zoom_changed', function() {
document.getElementById('zomlevel').value =map.getZoom();
document.getElementById('boundsmap').value = map.getCenter();
});
setupOfficeMarkers();
google.maps.event.addListener(map, 'idle', function() {
setupOfficeMarkers();
$("#loader").hide();
updateStatus(mgr.getMarkerCount(map.getZoom()));
});
});
//$("#loader").hide();
}
//function getIcon setting up home image on map locations
function getIcon(images) {
var icon = false;
if (images) {
if (icons[images[0]]) {
icon = icons[images[0]];
} else {
var iconImage = new google.maps.MarkerImage('images/' + images[0] + '.png',
new google.maps.Size(iconData[images[0]].width, iconData[images[0]].height),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var iconShadow = new google.maps.MarkerImage('images/' + images[1] + '.png',
new google.maps.Size(iconData[images[1]].width, iconData[images[1]].height),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var iconShape = {
coord: [1, 1, 1, 32, 32, 32, 32, 1],
type: 'poly'
};
icons[images[0]] = {
icon : iconImage,
shadow: iconShadow,
shape : iconShape
};
}
}
return icon;
}
function setupOfficeMarkers() {
mgr.clearMarkers();
mgr.refresh();
allmarkers.length = 0;
document.getElementById('zomlevel').value = map.getZoom();
document.getElementById('boundsmap').value = map.getCenter();
mapbound = map.getBounds();
var bounds = new google.maps.LatLngBounds();
for (var i in officeLayer) {
//alert(map.getBounds());
if (officeLayer.hasOwnProperty(i)) {
var layer = officeLayer[i];
var markers = [];
for (var j in layer["places"]) {
if (layer["places"].hasOwnProperty(j)) {
if(map.getZoom()>=layer["zoom"][0] && map.getZoom()<=layer["zoom"][1]){
//displaying home icon on places starts here
var place = layer["places"][j];
if(place["icon"]){
if(place["icon"][0]){
if(place["icon"][0] == 'own'){
}else{
var icon = getIcon(place["icon"]);
}
}else{
var icon = getIcon(place["icon"]);
}
}else{
var icon = getIcon(place["icon"]);
}
//displaying home icon on places ends here
var title = place["name"];
//alert(title);
var posn = new google.maps.LatLng(place["posn"][0], place["posn"][1]);
//------------------
//alert(title+'QA'+posn.toString());
bounds.extend(posn);
//map.fitBounds(bounds);
//----------------
if(map.getBounds().contains(posn)){
if(place["icon"][0] == 'own'){
var imageUrl = place["icon"][1];
var markerImage = new google.maps.MarkerImage(imageUrl, new google.maps.Size(66, 65));
var marker = new google.maps.Marker({
position: posn,
draggable: true,
icon: markerImage
});
}else{
var marker = createMarker(posn, title, getIcon(place["icon"]));
}
//alert(map.getBounds().contains(posn));
//markers.push(marker);
mgr.addMarker(marker, layer["zoom"][0], layer["zoom"][1]);
attachSecretMessageAjax(marker, place["name"],map);
//attachSecretMessage(marker, '<h2>'+place["name"]+'</h2>',map);
}
//allmarkers.push(marker);
}
}
}
//mgr.addMarkers(markers, layer["zoom"][0], layer["zoom"][1]);
}
}
map.fitBounds(bounds);
mgr.refresh();
//alert(map.getZoom());
updateStatus(mgr.getMarkerCount(map.getZoom()));
}
function createMarker(posn, title, icon) {
var markerOptions = {
position: posn,
title: title
};
if(icon !== false){
markerOptions.shadow = icon.shadow;
markerOptions.icon = icon.icon;
markerOptions.shape = icon.shape;
}
var marker = new google.maps.Marker(markerOptions);
google.maps.event.addListener(marker, 'dblclick', function() {
mgr.removeMarker(marker)
updateStatus(mgr.getMarkerCount(map.getZoom()));
});
return marker;
}
function showMarkers() {
mgr.show();
updateStatus(mgr.getMarkerCount(map.getZoom()));
}
function hideMarkers() {
mgr.hide();
updateStatus(mgr.getMarkerCount(map.getZoom()));
}
function deleteMarker() {
var markerNum = parseInt(document.getElementById("markerNum").value);
mgr.removeMarker(allmarkers[markerNum]);
updateStatus(mgr.getMarkerCount(map.getZoom()));
}
function clearMarkers() {
mgr.clearMarkers();
updateStatus(mgr.getMarkerCount(map.getZoom()));
}
function reloadMarkers() {
setupOfficeMarkers();
}
function updateStatus(html) {
document.getElementById("status").innerHTML = html;
}
//]]>
</script>
<script language="javascript" type="text/javascript">
tillto = 0;
function updateMap(){
loadmap(document.getElementById('zomlevel').value);
}
</script>
<script src="http://maps.google.com/maps/api/js?sensor=false"type="text/javascript"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/examples/google_northamerica_offices2.js" type="text/javascript">
</script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/src/markermanager.js"></script>
</head>
<!--<body onLoad="loadmap('5');"> -->
<body onLoad="loadmap();">
<div id="loader" style="z-index:11;">
<img alt="loading" src="skins/default/images/progress_bar.gif" />
</div>
<form name="mapsearch" id="mapsearch" method="post" action="index.php?mod=properties&func=getPropsMapNewMM" target="framesearch">
<div id="typemenubutton" class="typemenu" style="z-index:99;width:130px;height:14px;top:25px; left:100px;display:none;">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="line-height:14px;text-align:left; font-size:11px;">
<b>Vælg boligtyper:</b>
</td>
<td style="text-align:right;"><img src="skins/default/images/show.gif" id="typesShow" alt="Vis boligtyper" title="Vis boligtyper" class="imgButton" /></td>
</tr>
</table>
</div>
<div id="typemenu" class="typemenu" style="z-index:100;top:25px; left:100px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="3">
<span style="float:left;"><b>Vælg boligtyper:</b></span><img style="float:right;" src="skins/default/images/hide.gif" id="typesHide" class="imgButton" alt="Skjul menu" title="Skjul menu" />
</td>
</tr>
<tr>
<td style="padding-top:5px;">
<input type="checkbox" name="type_villa" id="type_villa" title="Villa/rækkehus" />
<label for="type_villa"><img src="skins/default/images/V.gif" alt="Villa/rækkehus" title="Villa/rækkehus" /> Villa/rækkehus</label>
<br />
<input type="checkbox" id="type_vlejl" name="type_vlejl" title="Villalejlighed" />
<label for="type_vlejl"><img src="skins/default/images/VL.gif" alt="Villalejlighed" title="Villalejlighed" /> Villalejlighed</label>
<br />
<input type="checkbox" id="type_lejl" name="type_lejl" title="Ejerlejlighed" />
<label for="type_lejl"><img src="skins/default/images/E.gif" alt="Ejerlejlighed" title="Ejerlejlighed" /> Ejerlejlighed</label>
</td>
</tr>
</table>
</div>
<!--Map advanced search html starts-->
<div id="advmenubutton" class="advmenu" style="z-index:99;width:130px;overflow:auto">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="menuheader1" style="font-size:11px;">Udvidet søgning</td>
<td style="text-align:right;"><img src="skins/default/images/show.gif" id="advShow" alt="Vis udvidet menu" title="Vis udvidet menu" class="imgButton" /></td>
</tr>
</table>
</div>
<div id="advmenu" class="advmenu" style="z-index:100;display:none;">
<table cellpadding="0" cellspacing="2" style="width:290px;">
<tr>
<td colspan="3"><b>Udvidet søgning</b></td>
<td style="text-align:right;">
<img src="skins/default/images/hide.gif" id="advHide" class="imgButton" alt="Skjul menu" title="Skjul menu" />
</td>
</tr>
<tr>
<td colspan="4" style="padding-top:10px;" class="menuheader2">Kontantpris:</td>
</tr>
<tr>
<td class="searchtxt"><input type="text" id="price_min" name="price_min" size="9" value="0" title="minimum kontantpris" /> kr
</td>
<td style="text-align:center;width:40px;"><img src="skins/default/images/arrow-right.gif" /></td>
<td class="searchtxt"><input type="text" id="price_max" name="price_max" size="9" value="10000000" title="maximum kontantpris" />
kr
</td>
<td></td>
</tr>
<tr><td colspan="4" class="menuspacer"> </td></tr>
<tr>
<td colspan="4" class="menuheader2">Nettopris:</td>
</tr>
<tr>
<td class="searchtxt"><input type="text" id="netprice_min" name="netprice_min" size="9" value="0" title="minimum Nettopris" /> kr
</td>
<td style="text-align:center;width:40px;"><img src="skins/default/images/arrow-right.gif" /></td>
<td class="searchtxt"><input type="text" id="netprice_max" name="netprice_max" size="9" value="10000000" title="maximum Nettopris" />
kr
</td>
<td></td>
</tr>
<tr><td colspan="4" class="menuspacer"> </td></tr>
<tr>
<td colspan="4" class="menuheader2">Værelser:</td>
</tr>
<tr>
<td><input type="text" id="room_min" name="room_min" size="9" value="0" title="minimum Værelser" />
</td>
<td style="text-align:center;width:40px;"><img src="skins/default/images/arrow-right.gif" /></td>
<td><input type="text" id="room_max" name="room_max" size="9" value="10" title="maximum Værelser" />
</td>
<td></td>
</tr>
<tr>
<td><input type="text" id="minYears" value="0" size="9" title="minimum byggeår" />
</td>
<td style="text-align:center;width:40px;"><img src="skins/default/images/arrow-right.gif" /></td>
<td><input type="text" id="maxYears" value="2100" size="9" title="maximum byggeår" />
</td>
<td></td>
</tr>
<tr><td colspan="4" class="menuspacer"> </td></tr>
<tr>
<td colspan="4" class="menuheader2">Antal etager:</td>
</tr>
</table>
<table id="geoSearch" cellpadding="0" cellspacing="2" width="100%" style="display:block;">
<tr><td colspan="4" class="menuspacer"> </td></tr>
<tr>
<td colspan="4" class="menuheader2">Postnummer:</td>
</tr>
<tr>
<td style="width:112px">
<input type="text" id="fraPostnr" name="fraPostnr" value="1000" size="9" title="laveste postnummer" />
</td>
<td style="text-align:center;width:40px;"><img src="skins/default/images/arrow-right.gif" /></td>
<td>
<input type="text" id="tilPostnr" name="tilPostnr" value="9990" size="9" title="højeste postnummer" />
</td>
<td></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="236px" style="margin-top:10px;">
<tr>
<td colspan="4" style="text-align:right;">
<input id="updateButton" type="button" value="opdatér" />
</td>
</tr>
</table>
</div>
</form>
<input type="hidden" name="zomlevel" id="zomlevel" value="" />
<input type="hidden" name="boundsmap" id="boundsmap" value="">
<div id="map-container">
<div id="map" style="width:100%; height:100%; position:absolute; top:1px; left:1px; z-index:10;"></div>
<div id="status"> </div>
</div>
<div id="inline-actions" style="visibility:hidden;">
<span>Max zoom level:
<select id="zoom">
<option value="-1">Default</option>
<option value="7">7</option>
</select>
</span>
<span class="item">Cluster size:
<select id="size">
<option value="-1">Default</option>
<option value="40">40</option>
</select>
</span>
<span class="item">Cluster style:
<select id="style">
<option value="-1">Default</option>
<option value="0">People</option>
</select>
</span>
<input id="refresh" type="button" value="Refresh Map" class="item"/>
<a href="#" id="clear">Clear</a>
</div>
<div id="framer" style="z-index:3000; top:300px; left:400px; height:400px; width:800px;">
<iframe id="framesearch" name="framesearch" src="" width="800" height="500" frameborder="0"></iframe>
</div>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools2.js"></script>
<script type="text/javascript">
function attachSecretMessage(marker, message,mapname) {
var infowindow = new google.maps.InfoWindow(
{ content: message,
size: new google.maps.Size(50,50)
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(mapname,marker);
});
}
function attachSecretMessageAjax(marker, message,mapname) {
google.maps.event.addListener(marker, 'click', function() {
load_content(marker,message,mapname);
});
}
function load_content(marker,message,mapname) {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var infowindow = new google.maps.InfoWindow();
infowindow.setContent('<div id="current-info-window">Loading...</div>');
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//document.getElementById('current-info-window').innerHTML = xmlhttp.responseText;
infowindow.setContent(xmlhttp.responseText);
}
}
xmlhttp.open("GET", message, true);
xmlhttp.send();
infowindow.open(mapname, marker);
}
$(document).ready(function(){
var typemenubutton = $("#typemenubutton");
var typesShow = $("#typesShow");
var typemenu = $("#typemenu");
var typesHide = $("#typesHide");
var advmenubutton = $("#advmenubutton");
var advShow = $("#advShow");
var advmenu = $("#advmenu");
var advHide = $("#advHide");
var loader = $("#loader");
var updateButton = $("#updateButton");
//boligtypes
var type_villa = $("#type_villa");
var type_rhus = $("#type_rhus");
var type_lejl = $("#type_lejl");
var type_fhus = $("#type_fhus");
var type_land = $("#type_land");
var type_hgrund = $("#type_hgrund");
var type_fgrund = $("#type_fgrund");
var type_abolig = $("#type_abolig");
var type_vlejl = $("#type_vlejl");
var mapsearch = $("#mapsearch");
//On click
typesShow.click(funcTypesShow);
typesHide.click(funcTypesHide);
advShow.click(funcAdvShow);
advHide.click(funcAdvHide);
updateButton.click(funcSearchSubmit);
type_villa.click(funcSearchSubmit);
type_rhus.click(funcSearchSubmit);
type_lejl.click(funcSearchSubmit);
type_fhus.click(funcSearchSubmit);
type_land.click(funcSearchSubmit);
type_hgrund.click(funcSearchSubmit);
type_fgrund.click(funcSearchSubmit);
type_abolig.click(funcSearchSubmit);
type_vlejl.click(funcSearchSubmit);
//On click
//typemenu.click(funcLoaderShow);
//On mouseout
//typemenu.mouseout(funcLoaderHide);
function funcTypesShow(){
typemenubutton.fadeOut(1000);
typemenu.fadeIn(1000);
}
function funcTypesHide(){
typemenubutton.fadeIn(1000);
typemenu.fadeOut(1000);
}
function funcAdvShow(){
advmenubutton.fadeOut(1000);
advmenu.fadeIn(1000);
}
function funcAdvHide(){
advmenubutton.fadeIn(1000);
advmenu.fadeOut(1000);
}
function funcLoaderShow(){
loader.fadeIn(1000);
}
function funcLoaderHide(){
loader.fadeOut(1000);
}
function funcSearchSubmit(){
loader.fadeIn(1000);
mapsearch.submit();
}
});
</script>