Google地图和标记,JSP [英] Google maps and Markers, JSP

查看:121
本文介绍了Google地图和标记,JSP的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用Java EE开发一个Web应用程序,我想动态地将标记添加到放置在我的JSP页面上的Google地图上,并使用我的数据库中的坐标。我有以下的代码,但我无法找出问题所在。

I am working on a web application with Java EE and I would like to dynamically add markers to the Google map placed on my JSP page with coordinates from my database. I have the following code, but I can't pinpoint the issue

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <style type="text/css">
  html, body{
height:100%;
margin: 0;
padding: 0;
  }
    #map_canvas{
height:700px;
width: 700px;
  }
  #map-canvas { height: 100% }
  </style>
  <sql:setDataSource var="enterdata" 
            driver="com.mysql.jdbc.Driver" 
            user="root" password="root" 
            url="jdbc:mysql://localhost/google_maps" />


        <script type="text/javascript" src="http://maps.google.com/maps/api/js?           sensor=false"></script>


       <script type="text/javascript">


       var markers = [
           <c:forEach var="s" items="${list.rows}">
[<c:out value="${s.latitude}"/>,<c:out value="${s.longitude}"/>]
        </c:forEach>        ];   




function initialize(){
    var latlng = new google.maps.LatLng(markers[0][1],markers[0][2]);
    var mapOptions={
        zoom: 6, // 0 à 21
        center: new google.maps.LatLng(36,5), // centre de la carte
        mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID, TERRAIN
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var infowindow = new google.maps.InfoWindow(), marker, i;

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


        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(markers[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));

    }
}
  google.maps.event.addDomListener(window, 'load', initialize);
   </script>
   </head>
   <body onload="initialize()">
    <div id="map_canvas"></div>
    <sql:query var = "users" dataSource="${dataSource}">
             select longitude,latitude from map
             </sql:query>
    <p class="info">${ message }</p>
    </body>
        </html>


推荐答案

b
$ b

If I understand properly this part

var markers = [
           <c:forEach var="s" items="${list.rows}">
[<c:out value="${s.latitude}"/>,<c:out value="${s.longitude}"/>]
        </c:forEach>   

输出数组中只有2个字段。在这种情况下,用于创建 LatLng 的索引是错误的,应该更改为使用0和1:

there are only 2 fields in output array. In that case indexes used to create LatLng are wrong and should be changed to use 0 and 1:

position: new google.maps.LatLng(markers[i][0], markers[i][1]),

否则,您还必须包含infowindow内容的相关信息。

Otherwise, you will have to include also information for infowindow content.

这篇关于Google地图和标记,JSP的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆