javascript - 如何使用 SQL 作为数据库和 JSP 在 Google map 上添加多个标记？

Question

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

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

现在我想在谷歌地图上添加多个标记，但想从 SQL 数据库中检索位置中的所有值。我试图将结果集作为数组传递给 JavaScript。但我只能单击一次调用 initMap() 方法。所以 map 上没有显示多个标记。一次只显示一个标记，而不是多个。而且我不想在任何 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#foreach 使用来自数据库的标记信息创建一个 js 数组:

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