Наложение в Google Maps - PullRequest
Новая
       7

Наложение в Google Maps

1 голос
/ 17 марта 2011

У меня проблема с оверлеями в Google Maps.

проблема заключается в использовании широты и долготы из базы данных для отображения наложения но наложение не отображается 

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*" %>
            <%
                Connection connection = null;
                boolean foundResults = false;
                ResultSet set = null;
                Statement statement = null;         
                String lat=null;
                String lng=null;
            %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
var map;
function initialize()
{
    var myLatLng = new google.maps.LatLng(18.9, 72.8);   
    var myOptions = {
                        zoom: 11,
                        center: myLatLng,
                        mapTypeId: google.maps.MapTypeId.TERRAIN
                    };    
    map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);   
    see();
    }
    function see()
    {
        <%
                    int count=0;
                    try 
                    {
                        Class.forName("org.postgresql.Driver");
                        connection = DriverManager.getConnection("jdbc:postgresql://localhost:5432/postgres","postgres", "password");
                        statement = connection.createStatement();
                        set = statement.executeQuery("SELECT count(lat) from latng");
                        while(set.next())
                        {
                            count = set.getInt(1);
                        }
                    }
                    catch(Exception e)
                    {
                    }
            %>
        var locations = new Array(<%= count%>);
        for(i = 0; i < locations.length; i++)
        {
            locations[i] = new Array(<%= count%>);
        }
        <%
            int i=0;
            try
            {
                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 latng");
                while(set.next())
                {
                    lat=set.getString(1);
                    lng=set.getString(2);
        %>
                    locations[<%= i %>][0]=<%= lat%>;
                    locations[<%= i %>][1]=<%= lng%>;   
                    <%
                        i++;
                }
                    %>
                    var i;
                    var infowindow = new google.maps.InfoWindow();
                    var marker;
                    for (i = 0; i < locations.length; i++)
                    {
                        marker = new google.maps.Marker({position: new google.maps.LatLng(locations[i][0],locations[i][1]),map: map});

                            var flightPlanCoordinates=[new google.maps.LatLng(locations[i][0],locations[i][1])];
                            var flightPath = new google.maps.Polyline({
                                                                    path: flightPlanCoordinates,
                                                                    strokeColor: "#FF0000",
                                                                    strokeOpacity: 1.0,
                                                                    strokeWeight: 2
                                                                });
                            flightPath.setMap(map);
                    }
        <%

            }
            catch(Exception e)
            {
            }
        %>
    }
</script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width=100%; height:80%"></div>
</body>
</html>

Спасибо, пожалуйста, помогите мне ...............

Ответы [ 2 ]

2 голосов
/ 17 марта 2011

Вот демоверсия JSFiddle :

Сначала мы создаем глобальную переменную для хранения наших точек ломаной линии: 

var flightPlanCoordinates = [];  //global array to track our Lat Lng needed to plot the polyline

Проблема, с которой вы столкнулись, заключается в том, что вы нене кормить полилинию более чем одним латгом.Так что, в основном, это не рисование ломаной линии, потому что для ее создания нужен только один Lat Lng.Вам нужно более одного Lat Lng, чтобы создать какую-то линию.Таким образом, мы создали глобальный массив с именем flightPlanCoordinates для отслеживания Lat Lng полилинии и помещаем в него местоположения Lat Lng с помощью цикла for.После завершения цикла for мы создаем наложение полилинии и устанавливаем для него текущую карту: 

function see() {
    var locations = new Array(3); //(<%= count%>);
    for (i = 0; i < locations.length; i++) {
        locations[i] = new Array(2); //This one is wrong!! (<%= count%>);
    }

    for (i = 0; i < locations.length; i++) {
        locations[i][0] = 18.9 + i / 100;
        locations[i][1] = 72.8 + i / 100;
    }

    var i;
    var infowindow = new google.maps.InfoWindow();
    var marker;
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][0], locations[i][1]),
            map: map
        });

        //pushing Lat Lng to use to create polyline
        flightPlanCoordinates.push(new google.maps.LatLng(locations[i][0], locations[i][1]));
    }

    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    flightPath.setMap(map);
}

Кроме того, обратите внимание, что в вашем информационном окне на самом деле нечего отображать.Там нет ассоциированного события клика с маркером, чтобы открыть его.

2 голосов
/ 17 марта 2011

Хорошо, на данный момент не полный ответ, но я начал работать с:

(как обычно без кода JSP)

Проверьте это и передайте мне, если это будет проблематичным случаем в вашем сценарии. 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
var map;
function initialize()
{
    var myLatLng = new google.maps.LatLng(18.9, 72.8);   
    var myOptions = {
                        zoom: 11,
                        center: myLatLng,
                        mapTypeId: google.maps.MapTypeId.TERRAIN
                    };    
    map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);   
    see();
}

    function see()
    {

        var locations = new Array(3); //(<%= count%>);
        for(i = 0; i < locations.length; i++)
        {
            locations[i] = new Array(2); //This one is wrong!! (<%= count%>);
        }


    for(i = 0; i < locations.length; i++) {
                    locations[i][0]=18.9 + i/100;
            locations[i][1]=72.8 + i/100; 
    }


                    var i;
                    var infowindow = new google.maps.InfoWindow();
                    var marker;
                    for (i = 0; i < locations.length; i++)
                    {
                        marker = new google.maps.Marker({position: new google.maps.LatLng(locations[i][0],locations[i][1]),map: map});

                            var flightPlanCoordinates=[new google.maps.LatLng(locations[i][0],locations[i][1])];
                            var flightPath = new google.maps.Polyline({
                                                                    path: flightPlanCoordinates,
                                                                    strokeColor: "#FF0000",
                                                                    strokeOpacity: 1.0,
                                                                    strokeWeight: 2
                                                                });
                            flightPath.setMap(map);
                    }


    }
</script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width=100%; height:80%"></div>
</body>
</html
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...