2011-03-01 159 views
0

iam pradeep我在谷歌地图上有一个问题 问题是iam根据我从我的数据库中获得的纬度和经度(纬度和经度)创建多个标记。谷歌地图上的标记问题

问题出在这里。 当我创建标记,只有最后标记加载到地图上,而不是加载所有的地图。

您可以在下面看到代码。

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<%@page import="java.sql.*" %> 
<%! 
     Connection connection = null; 
     boolean foundResults = false; 
     ResultSet set = null; 
     Statement statement = null; 
%> 

<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 

<style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> 

<script type="text/javascript"  src="http://maps.google.com/maps/api/js?sensor=true"> </script> 

<script type="text/javascript"> 

var locations; 
var h = new Array(10); 


function initialize() 
{  
    var latlng = new google.maps.LatLng(17.4531555176, 78.4580039978); 

    var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    //google.maps.event.addListener(map, 'zoom_changed', function() { setTimeout(moveToDsnr, 500);}); 
    google.maps.event.addListener(map, 'zoom_changed', function() { setTimeout(moveToAmpp, 500);}); 

    var marker = new google.maps.Marker({position: latlng,map: map,title:"Hyderabad"}); 

    google.maps.event.addListener(marker, 'click', function() { map.setZoom(12);}); 

} 

function moveToAmpp() 
{ 
    <% 
     String lat=null; 
     String lng=null; 

     int i=0; 
     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 lat, lng FROM latlng"); 
       while(set.next()) 
       //for(i=0;set.next();i++) 
       { 
        lat=set.getString(1); 
        lng=set.getString(2); 

    %> 
        alert(<%= lat%>); 
        alert(<%= lng%>); 

        locations = [['Dilsukhnagar', <%= lat%>, <%= lng%>, 1]]; 

        alert(locations); 
        var map = new google.maps.Map(document.getElementById("map_canvas"),{zoom: 12,center: new  google.maps.LatLng(17.38,78.48),mapTypeId:google.maps.MapTypeId.ROADMAP}); 
        var infowindow = new google.maps.InfoWindow(); 
        var marker; 
        var i; 
        //alert(locations.length); 
        alert(locations[0][0]); 
        alert(locations[0][1]); 
        alert(locations[0][2]); 
        alert(locations[0][3]); 

        for (i = 0; i < locations.length; i++) 
        { 
         marker = new google.maps.Marker({position: new google.maps.LatLng(locations[i][1],locations[i][2]),map: map}); 
         alert("done"); 
         google.maps.event.addListener(marker, 'click', (
          function(marker, i) 
          { 
           return function() 
             { 
              infowindow.setContent(locations[i][0]); 
              infowindow.open(map, marker); 
             } 
          }) 
          (marker, i)); 
          alert("created"); 
        } 


       alert("hello"); 
    <% 
       } 
     } 
     catch(Exception e) 
     { 
     } 
    %> 
} 

</script> 
</head> 

<body onload="initialize()">  
<div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 

</html> 

所以请帮助我。 谢谢。

回答

1

设置时出现问题locations = [['Dilsukhnagar', lat, lng, 1]]; 这会重置所有位置表并仅保留一条记录。

检查此更正:(我删除了JSP,因为我没有服务器) 您将不得不重新考虑JSP循环以使其与数据库一起工作。 您必须启动缩放才能调用初始化函数。我想你可能想改变这个,因为它会导致奇怪的行为。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
     <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> 
     <script type="text/javascript"  src="http://maps.google.com/maps/api/js?sensor=true"> </script> 

     <script type="text/javascript"> 

      var locations; 
      var h = new Array(10); 


      function initialize() 
      {  
       var latlng = new google.maps.LatLng(17.4531555176, 78.4580039978); 

       var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; 

       var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

       google.maps.event.addListener(map, 'zoom_changed', function() { setTimeout(moveToAmpp, 500);}); 

       var marker = new google.maps.Marker({position: latlng,map: map,title:"Hyderabad"}); 

       google.maps.event.addListener(marker, 'click', function() { map.setZoom(12);}); 

      } 

      function moveToAmpp() 
      { 
       var locations = new Array(2); 
       for(i = 0; i < locations.length; i++) { 
        locations[i] = new Array(4); 
       } 

       <% 
        String lat=null; 
        String lng=null; 

        int i=0; 
        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 lat, lng FROM latlng"); 
         while(set.next()) 
         { 
       %> 

          /* Can be embedded into JSP loop */ 
          locations[<%= i %>][0]="SomeThing You get from your DB?"; 
          locations[<%= i %>][1]=<%= lat%>; 
          locations[<%= i %>][2]=<%= lng%>; 
          locations[<%= i %>][3]="Something you get from your DB?"; 

       <%   i++; 
         } 
       %> 

       var map = new google.maps.Map(document.getElementById("map_canvas"),{zoom: 12,center: new  google.maps.LatLng(17.38,78.48),mapTypeId:google.maps.MapTypeId.ROADMAP}); 
       var infowindow = new google.maps.InfoWindow(); 
       var marker; 
       var i; 

       for (i = 0; i < locations.length; i++) 
       { 
        marker = new google.maps.Marker({position: new google.maps.LatLng(locations[i][1],locations[i][2]),map: map}); 
        //alert("done"); 
        google.maps.event.addListener(marker, 'click', (
         function(marker, i) 
         { 
          return function() 
            { 
             infowindow.setContent(locations[i][0]); 
             infowindow.open(map, marker); 
            } 
         }) 
         (marker, i)); 
       } 
    } 

    </script> 
</head> 

<body onload="initialize()">  
    <div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 

</html> 

它适合你吗?

+0

@ M'vy:非常感谢,但你能告诉我如何嵌入到JSp循环becoz我试过但没有successed.so请帮助M'vy。 – 2011-03-03 06:53:09

+0

我认为你对这部分没有问题。您可以执行循环并使用JSP变量来完成位置结构。我猜想是这样的:'在你的例子中你正在做的位置[<%= i %> [1] = <%= lat %>'。顺便说一句,您需要创建'i'变量来将其用作循环中的计数器,并为每次传递增加它。你看到了吗? (或者我可以尝试在那里添加一些代码,但在30-40分钟内我猜) – 2011-03-03 08:11:14

+0

我刚刚根据你的**第一次输入**编辑了代码。我不确定JSP部分,但是我对JSP的回忆看起来很好。我无法测试它。 – 2011-03-03 10:20:33