2011-02-01 58 views
2

我已經在谷歌地圖標記物的問題產生。上的標記在地圖上的點擊需要進行縮放和多指標需要在某些地方

的問題是我需要的地圖

上創建一個特定的標記在地圖上點擊多個標記u能幫助我,請....

請幫我....

感謝

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<%@page import="java.sql.*" %> 

      <%! 
       int i=1; 
       Connection connection = null; 
       boolean foundResults = false; 
       ResultSet set = null; 
       Statement statement = null; 
       String city; 
       String ip; 
       String sysname; 
       String sess; 

      %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 

     <head> 

     <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 

     <title>Google Maps API Sample</title> 

     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw" type="text/javascript"></script> 

     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>         

     <script type="text/javascript"> 

     var map; 

     var geocoder; 

     var address=sel.options[sel.selectedIndex].value; 
     document.write(address); 

     function createMarker(point,html,what) 

     { 
      var test = address; 
      var marker = new GMarker(point,{id:what, name:"foo", description:"baz"}); 

      GEvent.addListener(marker, "click", function() { 

      //marker.openInfoWindowHtml(html); 

      window.location.href="/geomapMidware.jsp?"+test+""; 

      }); 

      return marker; 

     } 

     function initialize() 
     { 

      map = new GMap2(document.getElementById("map_canvas")); 

      map.addControl(new GLargeMapControl()); 

      map.addControl(new GScaleControl()); 

      map.setCenter(new GLatLng(79, 0, true), 8); 

      map.addControl(new GMenuMapTypeControl(true,false)); 

      var point1 = map.getCenter(); 

      var marker = createMarker(point1,'<img src="printers-for-wire-and-network-elements-marking-43844.jpg" width="100" height="100">',"this") 

      map.addOverlay(marker); 

      geocoder = new GClientGeocoder();      

     } 


     function addAddressToMap(response) { 

     map.clearOverlays(); 

     if (!response || response.Status.code != 200) { 

      alert("Sorry, we were unable to geocode that address"); 

     } else { 

      place = response.Placemark[0]; 

      point = new GLatLng(place.Point.coordinates[1], 

           place.Point.coordinates[0]); 
      var test=address; 
      var marker = createMarker(point,'<a href="#"><img src="printers-for-wire-and-network-elements-marking-43844.jpg" width="100" height="100"></a>',"this"); 

      //the above code can also written as following 

      // var marker = createMarker(point,'<form><input type="button" name="b" value="Confirm" title="Click for Details" src="printers-for-wire-and-network-elements-marking-43844.jpg" width="100" height="100" onClick=find()></form>',"this"); 


      map.addOverlay(marker); 
      marker.openInfoWindowHtml('<b>Coordinates:</b>' + place.Point.coordinates); 
     } 
     } 

     function showLocation(sel) 
     { 
      address = sel.options[sel.selectedIndex].value; 
      var add1="Delhi"        
      geocoder.getLocations(add1, addAddressToMap); //when i click on the marker the map should be zoomed   
     } 

     function findLocation(address) 
     { 
      showLocation(); 
     } 

     function find() 
     { 
      var test=address; 
      //window.open("/Details.jsp?","winA","width=300,height=300,resizeable=no"); 
      window.location.href="/geomapDetails.jsp?"+test+""; 
     } 


    </script> 

     </head> 

     <body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;"> 

     <form name="f1" action="#" onsubmit="showLocation(); return false;"> 

      <% 
       try 
       { 
        Class c = Class.forName("org.postgresql.Driver"); 
        connection = DriverManager.getConnection("jdbc:postgresql://localhost:5432/postgres","postgres", "password"); 

        statement = connection.createStatement();    

        set = statement.executeQuery("SELECT sno,city,ip,sysname FROM test"); 

        while(set.next()) 
        { 

        } 

       } 
       catch(Exception e) 
       { 
        e.printStackTrace(); 
       } 
      %> 

     </form> 

     <div id="map_canvas" style="width: 1250px; height: 740px" title="map"></div> 
     </body> 
    </html> 

當我點擊該標記的地圖應該被放大

+0

如果你發佈你已經或將鏈接添加到您的網頁,我的人生是什麼樂意提供幫助。 – fncomp 2011-02-01 07:29:54

回答

1

假設你想顯示基於從用戶的位置的距離的地方。我還假設您根據用戶位置設置視口(usable example)。如果你有相當多的可能的標記,那麼你會希望從用戶只加載那些短距離距離。我會用一個外接矩形這一點,所以答案應該看起來像以下:

var populateViewport = function(mapObect){ 

    var bounds, markers, i, marker; 

    bounds = { 
     topLat: outerRound(mapObect.getBounds().getNorthEast().lat()), 
     topLng: outerRound(mapObect.getBounds().getNorthEast().lng()), 
     bottomLat: outerRound(mapObect.getBounds().getSouthWest().lat()), 
     bottomLat: outerRound(mapObect.getBounds().getSouthWest().lng()) 
    }; 

    markers = getMarkersInBounds(bounds); 

    for(i=0;i<markers.length;i++){ 
     marker = createMarker(markers[i]); // You already have this. 
     mapObject.addOverlay(marker); 
    } 

    return 'Success'; 

}; 

var getMarkersInBounds = function(bounds){ 
    /* I have no idea what your tables look like, but this should return the 
    * markers that have a lat/lng inside your box. 
    **/ 
}; 

var outerRound = function(_float){ 
    /* Conserve resources by rounding outwards. */ 
    return (_float > 0)? Math.ceil(_float) : Math.floor(_float); 
};