0

我正在尝试实现一个脚本，该脚本将对数组的所有位置进行地理编码并将其绘制到地图中。我是堆栈，因为我无法让地图适合屏幕中添加的所有标记。我花了很多时间尝试几种方法，这就是我想出的：

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title>
  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
  <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
  <script>

    var geocoder;
    var map;
    var markersArray = [];
    var bounds;

    //plot initial point using geocode instead of coordinates (works just fine)
    function initialize() {
        geocoder = new google.maps.Geocoder();
        bounds = new google.maps.LatLngBounds ();
        latlang = geocoder.geocode( { 'address': '5th Avenus New Yort'}, function(results, status) { 
            if (status == google.maps.GeocoderStatus.OK) {

                //map.setCenter(results[0].geometry.location);
                marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });

                markersArray.push(marker);
            }
            else{
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
        var myOptions = {
            center: latlang, 
            zoom: 2, 
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            }
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


        plotMarkers();
      }


        var locationsArray = [
            ['Google Official','1600 Amphitheatre Parkway, Mountain View, USA'],
            ['Google 1','112 S. Main St., Ann Arbor, USA'], 
            ['Google 2','10 10th Street NE, Suite 600 USA']
        ];

        function plotMarkers(){
            for(var i = 0; i < locationsArray.length; i++){
                console.log(locationsArray[i][1]);
                //codeAddresses(locationsArray[i]);
            }

            //map.fitBounds (bounds);
        }

        function codeAddresses(address){
            geocoder.geocode( { 'address': address}, function(results, status) { 
                if (status == google.maps.GeocoderStatus.OK) {

                        //map.setCenter(results[0].geometry.location);
                        marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location
                        });


                        bounds.extend (new google.maps.LatLng (results[0].geometry.location.ib,results[0].geometry.location.hb));
                        //console.log(bounds);

                    markersArray.push(marker); 
                }
                else{
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head> 
<body>
  <div id="map_canvas" style="width: 100%; height: 700px;"></div>
</body>
</html>

有人可以帮我解决这个问题，因为我似乎会永远坚持这个版本。

我有以下目标： 1. 绑定显示的地图，以便显示地图中放置的所有标记。2. 添加带有位置名称的 infoWindow。

我会欣赏任何帮助！

向大家问好，尼克

4

1 回答 1

4

您需要做的是bounds在添加每个标记时扩展您的对象。然后在将它们全部添加后，调用fitBounds以将地图重绘到该边界对象的适当缩放级别。

在创建标记时在循环中添加一个 InfoWindow，绑定到每个标记。这对我有用：

var geocoder;
var map;
var markersArray = [];
var bounds;
var infowindow =  new google.maps.InfoWindow({
    content: ''
});

//plot initial point using geocode instead of coordinates (works just fine)
function initialize() {
    geocoder = new google.maps.Geocoder();
    bounds = new google.maps.LatLngBounds ();

    var myOptions = {
        zoom: 2, 
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        }
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    geocoder.geocode( { 'address': '5th Avenus New Yort'}, function(results, status) { 
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);

            marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });

            bounds.extend(results[0].geometry.location);

            markersArray.push(marker);
        }
        else{
            alert("Geocode was not successful for the following reason: " + status);
        }
    });

    plotMarkers();
}

var locationsArray = [
    ['Google Official','1600 Amphitheatre Parkway, Mountain View, USA'],
    ['Google 1','112 S. Main St., Ann Arbor, USA'], 
    ['Google 2','10 10th Street NE, Suite 600 USA']
];

function plotMarkers(){
    var i;
    for(i = 0; i < locationsArray.length; i++){
        codeAddresses(locationsArray[i]);
    }
}

function codeAddresses(address){
    geocoder.geocode( { 'address': address[1]}, function(results, status) { 
        if (status == google.maps.GeocoderStatus.OK) {
            marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });

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

            bounds.extend(results[0].geometry.location);

            markersArray.push(marker); 
        }
        else{
            alert("Geocode was not successful for the following reason: " + status);
        }

        map.fitBounds(bounds);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);
于 2013-02-27T13:54:45.267 回答