覆盖谷歌地图 [英] Overlay in google maps
本文介绍了覆盖谷歌地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题是iam使用数据库的经度和纬度来显示叠加层
，但它没有显示覆盖
<％@ page contentType =text / htmlpageEncoding =UTF-8％>
<％@ page import =java.sql。*％>
<％
连接连接=空;
boolean foundResults = false;
ResultSet set = null;
Statement statement = null;
String lat = null;
String lng = null;
％>
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title> Google Maps JavaScript API v3示例：地理编码简单< / title>
< link href =http://code.google.com/apis/maps/documentation/javascript/examples/standard.css =stylesheettype =text / css/>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>
< script type =text / javascript>
var map;
函数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（）;
}
函数see（）
{
<％
int count = 0;
尝试
{
Class.forName（org.postgresql.Driver）;
connection = DriverManager.getConnection（jdbc：postgresql：// localhost：5432 / postgres，postgres，password）;
statement = connection.createStatement（）;
set = statement.executeQuery（来自latng的SELECT count（lat））;
while（set.next（））
{
count = set.getInt（1）;
}
}
catch（例外e）
{
}
％>
var locations = new Array（<％= count％>）;
for（i = 0; i< locations.length; i ++）
{
locations [i] = new Array（<％= count％>）;
}
<％
int i = 0;
尝试
{
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）;
％>
位置[<％= i％>] [0] =<％= lat％>;
个地点[<％= 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]，位置[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（例外e）
{
}
％>
}
< / script>
< / head>
< body onload =initialize（）>
< div id =map_canvasstyle =width = 100％; height：80％>< / div>
< / body>
< / html>
谢谢请有人帮助我............... JSFiddle演示：
首先，我们创建一个全局变量来保存折线点：
var flightPlanCoordinates = []; //全局数组跟踪我们需要绘制折线的Lat Lng
您遇到的问题是您没有喂食多于一个Lat Lng的折线。因此，基本上，它不绘制多段线，因为它只有一个Lat Lng来创建它。您需要多个Lat Lng来创建某种类型的行。因此，我们创建了一个名为 flightPlanCoordinates 的全局数组来跟踪多段线的经纬度，并在for循环中将纬度位置推到它。在for循环结束后，我们创建折线覆盖图并将其设置为当前映射：
function see（）{
var locations = new Array（3）; //（<％= count％>）;
for（i = 0; i< locations.length; i ++）{
locations [i] = new Array（2）; //这是错误的！ （<％= count％>）; （i = 0; i< locations.length; i ++）{
locations [i] [0] = 18.9 + i / 100;
}
;
位置[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]，位置[i] [1]），
map：map
}）;
//使用Lat Lng创建多段线
flightPlanCoordinates.push（新的google.maps.LatLng（位置[i] [0]，位置[i] [1]）） ;
}
var flightPath = new google.maps.Polyline（{
path：flightPlanCoordinates，
strokeColor：＃FF0000，
strokeOpacity：1.0 ，
strokeWeight：2
}）;
flightPath.setMap（map）;
}
进一步说明，您的信息窗口没有任何可显示的内容。没有与w / marker关联的点击事件来打开它。
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...............
解决方案
Here is the JSFiddle Demo:
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. So, basically, it's not drawing a polyline, because it only has one Lat Lng to create it. You need more than one Lat Lng to create a line of some sort. 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. After the for loop is over we then create the polyline overlay and set it with the current map:
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.
这篇关于覆盖谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
