我如何使用 SQL 作为数据库和 JSP 在 Google 地图上添加多个标记？

Question

我已经使用静态数据在 google 地图上成功添加了多个标记

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
 </script> 
 <script type="text/javascript">
  var delay = 100;
  var infowindow = new google.maps.InfoWindow();
  var latlng = new google.maps.LatLng(21.0000, 78.0000);
  var mapOptions = {
    zoom: 5,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var geocoder = new google.maps.Geocoder(); 
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var bounds = new google.maps.LatLngBounds();

  function geocodeAddress(address, next) {
    geocoder.geocode({address:address}, function (results,status)
      { 
         if (status == google.maps.GeocoderStatus.OK) {
          var p = results[0].geometry.location;
          var lat=p.lat();
          var lng=p.lng();
          createMarker(address,lat,lng);
        }
        else {
           if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
            nextAddress--;
            delay++;
          } else {
                        }   
        }
        next();
      }
    );
  }
 function createMarker(add,lat,lng) {
   var contentString = add;
   var marker = new google.maps.Marker({
     position: new google.maps.LatLng(lat,lng),
     map: map,
           });

  google.maps.event.addListener(marker, 'click', function() {
     infowindow.setContent(contentString); 
     infowindow.open(map,marker);
   });

   bounds.extend(marker.position);

 }
  var locations = [
           'New Delhi, India',
           'Mumbai, India',
           'Bangaluru, Karnataka, India',
           'Hyderabad, Ahemdabad, India',
           'Gurgaon, Haryana, India',
           'Cannaught Place, New Delhi, India',
           'Bandra, Mumbai, India',
           'Nainital, Uttranchal, India',
           'Guwahati, India',
           'West Bengal, India',
           'Jammu, India',
           'Kanyakumari, India',
           'Kerala, India',
           'Himachal Pradesh, India',
           'Shillong, India',
           'Chandigarh, India',
           'Dwarka, New Delhi, India',
           'Pune, India',
           'Indore, India',
           'Orissa, India',
           'Shimla, India',
           'Gujarat, India'
  ];
  var nextAddress = 0;
  function theNext() {
    if (nextAddress < locations.length) {
      setTimeout('geocodeAddress("'+locations[nextAddress]+'",theNext)', delay);
      nextAddress++;
    } else {
      map.fitBounds(bounds);
    }
  }
  theNext();

</script>

现在我想在 google 地图上添加多个标记，但想从 SQL 数据库中检索位置中的所有值。我试图将结果集作为数组传递给 JavaScript。但我只能单击一次调用 initMap() 方法。所以地图上没有显示多个标记。一次只显示一个标记，而不是多个。而且我不想在任何 onclick 方法上显示此标记。我也使用了 onload 方法，但是 resultset.next() 没有完全检索数据库的所有值。

我们将不胜感激。

注意：请仅建议如何使用存储在数据库中的值添加标记。不是静态的。

Answer 1

我想你有一个列表，其中包含名为 result 的标记数据，如果没有，则创建一个列表并用数据填充它。

也许你需要小费 List<Marker> markers; // full with data from database request.setAttribute("result",markers) // set markers in request scope

您可以通过 JSTL 使用来自数据库的标记信息创建一个 js 数组#foreach:

var markers = [
 <c:forEach var="marker" items="${result}">
    ['<c:out value="${marker.title}" />', // wrapped single quotes if string
      <c:out value="${marker.lat}" />,
      <c:out value="${marker.lng}" />,
    ],
 </c:forEach>   ];

现在您可以遍历它来制作动态标记：

function initialize() {
   /*your map definitions here*/

  for (i = 0; i < markers.length; i++) {
     var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    
     marker = new google.maps.Marker({
         position: position,
         map: map,
         title: markers[i][0],
         icon: image
     });
     google.maps.event.addListener(marker, 'click', (function (marker, i) {
    
       return function () {
            //if clicked
       }
     })(marker, i));
  }
}

你也可以看一个完整的例子Goole Maps with JSP/JSTL

Answer 2

是的..我弄错了..我正在创建标记但没有保留它。所以为此我创建了一个标记数组..并将所有标记放入其中..因此我保存了我使用数据库创建的每个标记..

这里是我所有的工作代码..

<!DOCTYPE html>
<%@ page import = "java.io.*,java.util.*,java.sql.*"%>
<%@ page import = "javax.servlet.http.*,javax.servlet.*" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>    
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Google Maps APIs</title>

        <link href="style.css" rel="stylesheet">

        <style>
            html,
            body {
                height: 200px;
                width: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body onload="initMap2();">


        <sql:setDataSource
            var="myDS"
            driver="com.mysql.jdbc.Driver"
            url="jdbc:mysql://localhost:3306/mess"
            user="root" password=""
            />

        <sql:query var="listUsers" dataSource="${myDS}">
            SELECT * FROM latlang;
        </sql:query>

        <div align="center">
            <select id="messname">
                <c:forEach var="user" items="${listUsers.rows}">
                    <option><c:out value="${user.messname}" /></option1>
                    </c:forEach>
            </select>
            <select id="lat">
                <c:forEach var="user" items="${listUsers.rows}">
                    <option><c:out value="${user.lat}" /></option>
                </c:forEach>
            </select>
            <select id="lang">
                <c:forEach var="user" items="${listUsers.rows}">
                    <option><c:out value="${user.lang}" /></option2>
                    </c:forEach>

            </select>

            <c:forEach var="user" items="${listUsers.rows}">

                <button><a onclick="showMarkers();">${user.messname}</a></button>
                </c:forEach>  

        </div>               
        <script>
        </script>
        <sql:query var="result" dataSource="${myDS}" >

            SELECT * from latlang;
        </sql:query>
        <script>


            var map;
      var markers = [];

      function initMap() {
          
          var mrks = [
            <c:forEach var="row" items="${result.rows}">
                    ['<c:out value="${row.messname}" />',
                <c:out value="${row.lat}" />,
                <c:out value="${row.lang}" />,
                    ],
            </c:forEach>];

        //var haightAshbury = {lat: 37.769, lng: -122.446};

        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
          center: {lat: 18.5204, lng: 73.8567},
          mapTypeId: 'terrain'
        });

        // This event listener will call addMarker() when the map is clicked.
          
        // Adds a marker at the center of the map.
        for(var i=0; i<mrks.length; i++)
        {   
                var pos = new google.maps.LatLng(mrks[i][1], mrks[i][2]);
                addMarker(pos);
        }
     }

      // Adds a marker to the map and push to the array.
      function addMarker(location) {
        var marker = new google.maps.Marker({
          position: location,
          map: map
        });
        markers.push(marker);
      }

      // Sets the map on all markers in the array.
      function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }

      // Removes the markers from the map, but keeps them in the array.
      

      // Shows any markers currently in the array.
      function showMarkers() {
        setMapOnAll(map);
      }

      // Deletes all markers in the array by removing references to them.
        </script>

        <p><td>  </td></p>

<input type="text" id="searchvalue">

<input type="button" id="btn" value="Click" onclick="">        
<%-- //>--%>

<div id="map" style="height:200px; width:200px"></div>
<p>


    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBN1fnarI5qrCYI7gS6ksuX3L7jHGTq2MY&callback=initMap"></script>
</body>

</html>

感谢您的帮助..!!!

我如何使用 SQL 作为数据库和 JSP 在 Google 地图上添加多个标记？

How can i add Multiple Markers on Google Map using SQL as a Database and JSP?

javascript

java

jsp

jsp-tags

java-server