Google地图和标记，JSP

小编典典

Google地图和标记，JSP

jsp

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

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

阅读 381

2020-06-10

共1个答案

小编典典

如果我正确理解这部分

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：

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

否则，您将还必须包含有关信息窗口内容的信息。

2020-06-10