谷歌地圖不集中和適合屏幕上的所有標記

我已經從網站上獲得了一些代碼，並對其進行了修改以適合我的需要，現在它正在做我主要想做的事情，即列出大約500個地圖上的標記。問題在於它不會縮小和居中，因此我可以看到放置在地圖上的所有標記，而不得不手動縮小以查看所有內容。有人能告訴我我錯了哪裏？谷歌地圖不集中和適合屏幕上的所有標記

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Simple markers</title> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 

    </head> 

<body> 
    <div id="map_canvas" style="width: 600px; height: 600px; margin: 0 auto;"></div> 
    <?php 

     require 'DB.php'; 

     $stmt = "SELECT * FROM small"; 
     $corodinates = array(); 
     $i = 0; 
     foreach($DB->query($stmt) as $row) { 

      $corodinates['Latitude'][$i] = $row['Lat']; 
      $corodinates['Longitude'][$i] = $row['Long']; 
      $corodinates['Address'][$i] = $row['Address']; 
      $i++; 
     } 
    ?> 
    <div id="map_canvas"></div> 
    <script type="text/javascript"> 
     var markers = new Array(); 
     var data = <?php echo json_encode($corodinates); ?>; 

     for (var i = 0; i < data.Latitude.length; i++) 
     { 
      markers[i] = [(data.Latitude[i]), (data.Longitude[i])]; 
     }  
    </script> 

    <script> 
     function initialize() { 
      var map; 
      var bounds = new google.maps.LatLngBounds(); 
      var mapOptions = { 
       zoom: 8, 
       center: new google.maps.LatLng(41.8537438, -87.6529606), 
       mapTypeId: 'roadmap' 
      }; 

      // Display a map on the page 
      map = new google.maps.Map(document.getElementById("map_canvas"), 
      mapOptions); 
      map.setTilt(45); 

      // Info Window Content 

      // Display multiple markers on a map 
      var infoWindow = new google.maps.InfoWindow(), marker, i; 

      // Loop through our array of markers & place each one on the map 
      for(i = 0; i < markers.length; i++) { 
       var position = new google.maps.LatLng(markers[i][0], markers[i][1]); 
       bounds.extend(position); 
       marker = new google.maps.Marker({ 
        position: position, 
        map: map 
       }); 

       // Allow each marker to have an info window  
       google.maps.event.addListener(marker, 'click', (function(marker, i) { 
        return function() { 
         infoWindow.setContent(markers[i][2]); 
         infoWindow.open(map, marker); 
        } 
       })(marker, i)); 

       // Automatically center the map fitting all markers on the screen 
       map.fitBounds(bounds); 
      } 
     } 
    </script> 

    <script>initialize();</script> 
</body> 

</html>

來源

2014-01-26 Yamaha32088

我在代碼中得到了javascript錯誤。 '未捕獲的SyntaxError：意外的標記<第37行， '未捕獲的ReferenceError：標記未定義第66行，或許您可以發佈從PHP生成的HTML。該代碼看起來是正確的，所有的標記位置「有效」？ – geocodezip

此代碼會做什麼它說：

 // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) 
     var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
      this.setZoom(14); 
      google.maps.event.removeListener(boundsListener); 
     });

如果你想fitBounds顯示所有標記刪除它。

來源

2014-01-26 16:52:54 geocodezip

我沒有收到我的代碼中的任何錯誤，但我更新了我的問題，並根據您的建議在此更新了代碼。現在我遇到了一個問題，當我點擊一個標記打開一個infoWindow時，它不會將它錨定到標記，我看到infoWindow的底部出現在'map_canvas'的左上角。任何想法爲什麼？ – Yamaha32088

您問題中的代碼仍包含我們無法運行的PHP，從這裏開始：'<？php'（從數據庫加載標記）。由於我們看不到您的標記，因此我們無法看到問題。仍然聽起來像你的數據庫中有錯誤的數據。 – geocodezip

谷歌地圖不集中和適合屏幕上的所有標記

回答

相關問題