谷歌地图中的叠加答案

【问题标题】：Overlay in google maps谷歌地图中的叠加
【发布时间】：2011-03-17 11:19:06
【问题描述】：

我在 google 地图中遇到了覆盖问题。

问题是我使用数据库中的纬度和经度来显示覆盖但它没有显示覆盖

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

谢谢，请有人帮助我......

【问题讨论】：

您从数据库中获取的数据是否正确？
我检查了代码不能使用静态值。
@M'vy 当您说不工作时，它的哪一部分不工作？ firebug 或 chrome 开发者工具是怎么说的？
@kjy112 实际上我认为我用于静态案例的值超出了范围。看看我在下面的提议。我得到了上面有 3 个点的地图。（当然是静态值）
@M'vy 是的，但我不确定他想如何覆盖地图？点之间的线？

标签： javascript google-maps

【解决方案1】：

这里是JSFiddle Demo：

首先我们创建一个全局变量来保存我们的折线点：

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

您遇到的问题是您没有提供超过一个 Lat Lng 的折线。所以，基本上，它不是绘制折线，因为它只有一个 Lat Lng 来创建它。您需要多个 Lat Lng 来创建某种线。因此，我们创建了一个名为 flightPlanCoordinates 的全局数组来跟踪折线的 Lat Lng，并在 for 循环中将位置 Lat Lng 推送到它。在 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);
}

进一步说明，您的信息窗口实际上并没有任何可显示的内容。没有带有标记的点击事件关联来打开它。

【讨论】：

感谢 kjy112 它完美地工作我想要的，但我想要的是从数据库中获取纬度和经度......这不起作用......你能帮我...... ..
我尝试了它并进行了一些更改......它甚至可以与数据库一起使用...... Thnaks kjy112......你能解释一下你是怎么做到的...... ...我看到你将 flightPlanCoordinates[] 作为数组并使用了推送功能.......你能解释一下你做了什么......请 kjy112
最初馈送折线的方式不起作用，因为您只需向其馈送一个点并尝试创建线。折线需要多个点来创建。所以，基本上我创建了一个全局数组并提供多个点来创建你的折线。 Please accept/up vote answer to your questions. So, people will be more willing to help you in the future.
Hai kjy112 我有一个新问题你能帮我吗？请点击链接httP://stackoverflow.com/questions/5457937/google-maps-polyline

【解决方案2】：

好的，目前还不是一个完整的答案，但我有一个工作开始：

（像往常一样没有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

【讨论】：

是的，谢谢.....这段代码正在工作，但是当我从数据库中获取纬度和经度时，我得到了北向，我的意思是没有创建覆盖