谷歌地圖API - 汽車中心和自動縮放

我無法從CSV文件進入一個PHP數組，然後轉移到JavaScript創建了一個地圖上安裝汽車中心和自動變焦 - 代碼如下 -谷歌地圖API - 汽車中心和自動縮放

<!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，但我似乎無法得到它的工作或者頁面不加載或它只集中在一個結果，然後我不得不縮小。

來源

2015-12-30 PaulyboyUK

這裏是我爲這種情況下的設置，請注意，我在此處使用window，以便我可以從任何範圍訪問Google對象。您需要使用extend()方法將每個標記添加到mapBounds並通過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>

來源

2015-12-30 10:35:53

點上 - 我可以從這個工作 - 三江源:-) – PaulyboyUK

谷歌地圖API - 汽車中心和自動縮放

回答

相關問題