Проблема с перетаскиванием маркера карты Google и масштабированием карты - PullRequest
Новая
       34

Проблема с перетаскиванием маркера карты Google и масштабированием карты

0 голосов
/ 19 декабря 2011

Я получил этот проект от старшего программиста, который только что покинул компанию.На этой карте было много проблем, многие из которых исправлены.Теперь осталось 2 основных вопроса.1. положение маркеров не фиксировано, т. Е. Если вы перетаскиваете мышью enter code here любой маркер, который вы можете - мне нужно сделать так, чтобы они были зафиксированы на месте.2. У меня проблема с зумом (fitBounds).я вызвал функцию fitBounds в setupOfficeMarkers (), которая обновляется дважды при каждом изменении карты.Таким образом, он приносит одни и те же латы и ланги каждый раз.Из-за чего увеличение любого маркера просто невозможно.До сих пор я не могу найти место, где я могу наилучшим образом разместить этот вызов 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>

1 Ответ

0 голосов
/ 22 декабря 2011

Я решил обе вышеупомянутые проблемы.Я хотел бы поставить решения.Несмотря на то, что упомянутый код довольно длинный, его будет непросто разработать.

Для перетаскивания маркеров мышью.есть перетаскиваемое свойство, которое может быть как истинным, так и ложным. 

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 и вызов офисного маркера создателя маркера. 

etupOfficeMarkers();

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

             map.fitBounds(bound);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...