Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图API-自动居中和自动缩放

Javascript 谷歌地图API-自动居中和自动缩放

javascript php css google-maps

Javascript 谷歌地图API-自动居中和自动缩放,javascript,php,css,google-maps,Javascript,Php,Css,Google Maps,我无法在从CSV文件创建的地图上安装自动居中和自动缩放，该文件进入PHP数组，然后传输到JavaScript——代码如下- <!DOCTYPE html> <?php include "getCsvData.php"; // this is where we put the data into a PHP array called $dataArray; // now we exit the PHP and do the HTML including our Javas

我无法在从
CSV
文件创建的地图上安装自动居中和自动缩放，该文件进入PHP数组，然后传输到JavaScript——代码如下-

<!DOCTYPE html>

<?php

include "getCsvData.php";   // this is where we put the data into a PHP array called $dataArray;
// now we exit the PHP and do the HTML including our Javascript...

?>

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet"
          type="text/css"/>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        var geocoder;
        var map;
        var markers = [];
        var image = {
            url: 'src/icon' + 'a.png'
            ,
        };

        function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(0, 0);
            var myOptions = {
                zoom: 7,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            <?php
            for($i = 0, $j = count($postcodes); $i < $j - 1 ; $i++) {
            ?>
            addPostCode(<?php echo str_replace(array('[', ']'), '', json_encode($postcodes[$i])); ?>);
            <?php } ?>
        }
        function addPostCode(zip) {
            geocoder.geocode({'address': zip}, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {

                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        icon: image,
                        position: results[0].geometry.location,
                        name: zip
                    });
                    markers.push(marker);
                    // latlng.extend(marker.position);
                } else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                    setTimeout(function () {
                        Geocode(address);
                    }, 200);
                }

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

        }

    </script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="height:90%"></div>
</body>
</html>


谷歌地图JavaScript API v3示例：地理编码简单
var地理编码器；
var映射；
var标记=[]；
变量图像={
url:'src/icon'+'a.png'
,
};
函数初始化（）{
geocoder=新的google.maps.geocoder（）；
var latlng=新的google.maps.latlng（0,0）；
变量myOptions={
缩放：7，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
addPostCode（）；
}
函数addPostCode（zip）{
geocoder.geocode（{'address'：zip}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
var marker=new google.maps.marker({
地图：地图，
图标：图像，
位置：结果[0]。geometry.location，
姓名：zip
});
标记器。推（标记器）；
//板条延伸（标记位置）；
}else if（status==google.maps.GeocoderStatus.OVER\u QUERY\u LIMIT）{
setTimeout（函数（）{
地理编码（地址）；
}, 200);
}
否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
});
}
我发现我需要使用
fitBounds
，但我似乎无法让它工作，要么页面没有加载，要么它只集中在一个结果上，然后我必须缩小。这是我在这种情况下的设置，请注意，我在这里使用
窗口
，这样我就可以从任何范围访问Google对象。您需要使用
extend（）
方法将每个标记添加到
mapBounds
，并传递
位置



$（函数（）{
window.gMap=new google.maps.Map（document.getElementById（'Map-canvas'）{
缩放：10，
中心：{lat:37.769，lng:-122.446}
});
var地址=[“姜饼街296号”、“霍斯金斯Ct街383号”、“列日街1608号”、“曼德勒Ct街519号”、“欢乐山顶Dr街342号”、“箭袋点大街1757号”、“Ct街174号瑞星梅萨街”、“硅砂街26号”、“雷霆平原路192号”、“木材空心街277号”、“太平洋大道367号”、“华盛顿大街382号”]；
var超时=0；
$。每个（地址、功能（i、地址）{
setTimeout（函数（）{addMarker（地址）}，超时）；
超时=超时+1600；
});
});
函数addMarker（地址）{
geoCoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
gMap.setCenter（结果[0].geometry.location）；
var marker=new google.maps.marker({
地图：gMap，
位置：结果[0]。geometry.location，
});
标记器。推（标记器）；
//扩展边界以包括每个标记的位置
mapBounds.extend（marker.position）；
//现在将贴图适配到新包含的边界
gMap.fitBounds（mapBounds）；
}否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
});
}


#地图画布{
宽度：80%；
左侧填充：15px；
右侧填充：15px；
高度：300px；
边框：2px实心#e8e8e8；
边界半径：4px；
保证金：自动；
}



函数initMap（）{
window.mapBounds=new google.maps.LatLngBounds（）；
window.geoCoder=新的google.maps.geoCoder（）；
window.markers=[]；
}