Fatal编程技术网
  • google-maps/
  • Google maps 谷歌地图地理编码和绘制多个位置

Google maps 谷歌地图地理编码和绘制多个位置

google-maps google-maps-api-3

Google maps 谷歌地图地理编码和绘制多个位置,google-maps,google-maps-api-3,google-geocoding-api,Google Maps,Google Maps Api 3,Google Geocoding Api,我正在尝试实现一个脚本，该脚本将地理编码并将阵列的所有位置绘制到地图中。我是stack，因为我无法使地图适合屏幕中添加的所有标记。我在尝试几种方法时浪费了很多时间，结果是： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Google Maps Multipl

我正在尝试实现一个脚本，该脚本将地理编码并将阵列的所有位置绘制到地图中。我是stack，因为我无法使地图适合屏幕中添加的所有标记。我在尝试几种方法时浪费了很多时间，结果是：

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


谷歌地图多个标记
var地理编码器；
var映射；
var-markersArray=[]；
var界；
//使用地理代码而不是坐标绘制初始点（工作正常）
函数初始化（）{
geocoder=新的google.maps.geocoder（）；
bounds=new google.maps.LatLngBounds（）；
latlang=geocoder.geocode（{'address'：'5th Avenus New Yort'}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
//map.setCenter（结果[0].geometry.location）；
marker=新的google.maps.marker({
地图：地图，
位置：结果[0]。几何体。位置
});
markersArray.push（marker）；
}
否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
});
变量myOptions={
中心：拉特朗，
缩放：2，
mapTypeId:google.maps.mapTypeId.ROADMAP，
导航控制选项：{
样式：google.maps.NavigationControlStyle.SMALL
}
};
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
绘图标记（）；
}
变量位置数组=[
[‘谷歌官方’，‘美国山景城1600圆形剧场公园路’，
[“谷歌1号”，“美国安娜堡南大街112号”]，
[‘谷歌2’，‘美国东北第十街10号，600套房’]
];
函数plotMarkers（）{
对于（变量i=0；i
谁能帮我一把，因为我似乎要永远坚持这个版本

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

我将感谢任何帮助

向你们大家问好，
尼克

添加每个标记时，您需要做的是扩展
边界
对象。然后在添加完所有对象后，调用
fitBounds
将贴图重新绘制到该边界对象的适当缩放级别

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

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

var地理编码器；
var映射；
var-markersArray=[]；
var界；
var infowindow=new google.maps.infowindow({
内容：“”
});
//使用地理代码而不是坐标绘制初始点（工作正常）
函数初始化（）{
geocoder=新的google.maps.geocoder（）；
bounds=new google.maps.LatLngBounds（）；
变量myOptions={
缩放：2，
mapTypeId:google.maps.mapTypeId.ROADMAP，
导航控制选项：{
样式：google.maps.NavigationControlStyle.SMALL
}
};
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
地理编码（地址：'5th Avenus New Yort'}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
marker=新的google.maps.marker({
地图：地图，
位置：结果[0]。几何体。位置
});
extend（结果[0].geometry.location）；
markersArray.push（marker）；
}
否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
});
绘图标记（）；
}
变量位置数组=[
[‘谷歌官方’，‘美国山景城1600圆形剧场公园路’，
[“谷歌1号”，“美国安娜堡南大街112号”]，
[‘谷歌2’，‘美国东北第十街10号，600套房’]
];
函数plotMarkers（）{
var i；
对于（i=0；i