当前位置： 文江博客话题详情

Google 地图标记拖动和缩放地图问题

发布于 2024-12-21 21:11:56 字数 24853 浏览 2 评论 0原文

我从一位刚刚离开公司的高级程序员那里收到了这个项目。这张地图有很多问题，其中许多问题都得到了修复。 现在还剩下两个主要问题。

  1. 标记位置不固定，即如果您用鼠标拖动任何标记，您可以 - 我需要将它们固定在其位置。
  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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>
原文

I received this project from a senior programmer, who has just left the company. This map had lots of issues out of which many are fixed.
Now there are 2 major issues left in there.

  1. markers position is not fixed i.e. if you mouse drag any marker you can - I need to make them fixed at their place.
  2. I have problem with zoom (fitBounds). i have called fitBounds function in setupOfficeMarkers(), which refreshes twice on every change in the map. So, it brings the same lats and langs every time. Because of which zooming any marker is just not possible. So far i am not able to locate the place where i can best suitably put this fitBounds call.

Sorry for putting such a long code. but I wanted to place maximum thing to resolve these issues.

Thanks alot for your help and support in advance.

<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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

半寸时光 2024-12-28 21:11:56

我已经解决了上述两个问题。我想提出解决方案。尽管上述代码相当冗长，因此并不容易详细说明。

用于鼠标拖动标记。有一个可拖动属性，可以是 true 或 false。

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: false,
           icon: markerImage
          });
  }

我把它变成了假。

对于 fitBounds 调用，我调用了 addListener 和 Office 标记创建器调用下面的函数。

etupOfficeMarkers();

  google.maps.event.addListener(map, 'idle', function() {
            setupOfficeMarkers();
              $("#loader").hide();
              updateStatus(mgr.getMarkerCount(map.getZoom()));
            });

             map.fitBounds(bound);

I have resolved both the above mentioned issues. I would like to put the solutions. Although the mentioned code is quite lengthy, therefore, it would not be easy to elaborate.

For mouse dragging of the markers. there is a draggable property, which can be either true or false.

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: false,
           icon: markerImage
          });
  }

I turned it to false.

For fitBounds call, I called the function below addListener and office marker creater call.

etupOfficeMarkers();

  google.maps.event.addListener(map, 'idle', function() {
            setupOfficeMarkers();
              $("#loader").hide();
              updateStatus(mgr.getMarkerCount(map.getZoom()));
            });

             map.fitBounds(bound);
回复 原文
~没有更多了~

关于作者

权谋诡计

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

微信用户

文章 0 评论 0

小情绪

文章 0 评论 0

追我者格杀勿论

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

笨死的猪

文章 0 评论 0

彭明超

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文