在Google地图中叠加

Question

I have a problem with overlays in google maps. 我在谷歌地图中叠加了一个问题。

the problem is iam using latitude and longitude from the database to display overlay but its not showing the overlay 问题是我使用数据库中的纬度和经度来显示叠加层，但它没有显示叠加层

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

Thanks please some one help me............... 谢谢，请有人帮助我...............

Answer 1

Ok, not a full answer for the moment but I got a working thing to begin with : 好的，暂时还没有完整的答案，但我开始有一个工作的事情：

(As usual without JSP code) （像往常一样没有JSP代码）

Check it, and feed me back if this would be a problematic case in your scenario. 检查它，如果在您的方案中这将是一个有问题的情况，请回馈我。

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

Answer 2

Here is the JSFiddle Demo : 这是JSFiddle演示：

First we create a global variable to hold our polyline points: 首先，我们创建一个全局变量来保存折线点：

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

The issue you have is that you aren't feeding the polyline more than one Lat Lng. 您遇到的问题是您没有为折线提供多个Lat Lng。 So, basically, it's not drawing a polyline, because it only has one Lat Lng to create it. 所以，基本上，它不是绘制折线，因为它只有一个Lat Lng来创建它。 You need more than one Lat Lng to create a line of some sort. 您需要多个Lat Lng来创建某种类型的线。 Thus, we created a global array called flightPlanCoordinates to track the Lat Lng of the polyline, and pushes the locations Lat Lng to it with in the for loop. 因此，我们创建了一个名为flightPlanCoordinates的全局数组来跟踪折线的Lat Lng，并在for循环中将Lat Lng的位置推送到它。 After the for loop is over we then create the polyline overlay and set it with the current map: 在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);
}

Further note, your info window doesn't really have anything to show for. 请注意，您的信息窗口实际上没有任何显示内容。 There's no click event associate w/ marker to open it. 没有点击事件关联w /标记打开它。

在Google地图中叠加

问题描述

2 个解决方案

解决方案1
2 2011-03-17 13:20:43

解决方案2
2 已采纳 2011-03-17 13:42:01

在Google地图中叠加

问题描述

2 个解决方案

解决方案1 2 2011-03-17 13:20:43

解决方案2 2 已采纳 2011-03-17 13:42:01

解决方案1
2 2011-03-17 13:20:43

解决方案2
2 已采纳 2011-03-17 13:42:01