谷歌地图中的标记问题

Question

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

问题来了。 当我创建标记时，只有最后一个标记被加载到地图上，而不是加载所有地图。

你可以在下面看到代码。

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

所以请帮助我。 谢谢。

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

它对你有用吗？