Question

我是JSP新手。我有一个要求，我必须建立一个网页，从数据库中获取地址字段的记录（包括街道，地区，城市，交换，国家名称），并在谷歌地图上显示相同的标记。

为此，我没有地址的纬度/经度，但在数据库中有物理地址详细信息。

有人可以就此建议我。

我现有的代码如下所示，它需要latitude / langitue以及单个位置。我必须根据数据库输出显示多个点，输入参数将是它们的物理地址。

＆＃13;

var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
  position:myCenter,
  });

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>


</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>

＆＃13;

Answer 1

你可以迭代你的loction数组（检索表单数据库），然后添加标记，例如：这样..

 for (var i = 0; i < locations.length; i++) {
                 addMarker(locations[i].lat, locations[i].lng);
             }

Answer 2

如果您想在同一张地图上显示多个标记但只有一个地址。您可以使用Google Maps API v3中的地理编码器功能。

Here's a demo of how it works this code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Mapa</title>
    <meta charset="utf-8" />
    <style type="text/css">
        body {
          margin: 0;
          padding: 0;
          font: 12px sans-serif;
        }
        h1, p {
          margin: 0;
          padding: 0;
        }    
    </style>
</head>
<body>
    <div id="googleMap" style="height: 400px;"></div>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
    <script>
    /*
     * declare map as a global variable
     */
    var map;
    var myMarkers = [];
    /*
     * create a initialize function
     */
    function initialize() {
        var myCenter=new google.maps.LatLng(51.508742,-0.120850);
        var mapOptions = {
            center: myCenter,
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        };

        map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
        SetMarkers();
    }
    google.maps.event.addDomListener(window, 'load', initialize);


    function SetMarkers() {
        var geocoder = new google.maps.Geocoder();
        var myData = [];

        // here you can change this JSON for a call to your database 
        myData = [
            {name: "London",  address: "London, Reino Unido"},
            {name: "Oxford",  address: "Oxford, Reino Unido"},
            {name: "Bedford", address: "Bedford, Reino Unido"},
        ];

        for(i = 0; i < myData.length; i++) {
            geocoder.geocode({ 'address': myData[i].address }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {                
                    myMarkers[i] = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map
                    });
                } else {
                    alert("We can't found the address, GoogleMaps say..." + status);
                }
            });
        }
    }

    </script>
</body>
</html>

通过从数据库

2 个答案: