Question

我无法在从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>

我发现我需要使用fitBounds，但我似乎无法使其工作，无论是页面加载还是仅以一个结果为中心，然后我必须缩小。

Answer 1

这是针对此类案例的设置，请注意我在此处使用window，因此我可以从任何范围访问Google对象。您需要使用mapBounds方法将每个标记添加到extend()并传递position。

$(function(){

    window.gMap = new google.maps.Map(document.getElementById('map-canvas'), {
            zoom: 10,
            center: {lat: 37.769, lng: -122.446}
        });

   var addresses = ["296 Gingerbread St", "383 Hoskins Ct", "1608 Liege Dr", "519 Mandalay Ct", "342 Pleasant Summit Dr", "1757 Quiver Point Ave", "174 Rising Mesa Ct", "26 Silica Sand St", "192 Thunder Plains Way", "277 Timber Hollow St", "367 Via Pacifico", "382 Washtenaw St"];
   
   var timeOut = 0;
   $.each(addresses, function(i, address){
      setTimeout(function(){ addMarker(address) }, timeOut);
      timeOut = timeOut+1600;
   });

});



function addMarker(address) {
            geoCoder.geocode({'address': address}, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {

                    gMap.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: gMap,
                        position: results[0].geometry.location,
                    });
                    markers.push(marker);
                    //extend the bounds to include each marker's position
                    mapBounds.extend(marker.position);
                    //now fit the map to the newly inclusive bounds
                    gMap.fitBounds(mapBounds);
                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
}

#map-canvas {
  width:80%;
  padding-left:15px;
  padding-right:15px;
  height:300px;
  border:2px solid #e8e8e8;
  border-radius:4px;
  margin:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function initMap() {
        window.mapBounds = new google.maps.LatLngBounds();
        window.geoCoder  = new google.maps.Geocoder();
        window.markers = [];
}  
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<div id="map-canvas"></div>

Google Maps API - 自动中心和自动缩放

1 个答案: