如何根據city_id居中地圖？

-1

我如何根據其標記對地圖進行縮放和居中。例如，顯示的所有標記都是迪拜，所以我想將地圖居中到迪拜，如果所有標記都是美國的，我想縮放並居中它到了美國。這是我的代碼人請幫助我。

test.php的

<?php 


    $sql=<<<EOF 
    SELECT * from markers; 
    EOF; 
    $result = $db->query($sql); 
    $yourArray = array(); 
    $index = 0; 

     while($row = $result->fetchArray(SQLITE3_ASSOC)){ 

     $json[] = array(
    'lat' => $row['latitude'], 
    'lon' => $row['longitude'], 
    'name' => $row['name'], 
    'city_id'=>$row['city_id'] 


    ); 

    } 

$db->close(); 


    ?> 

    <!DOCTYPE html> 
    <html> 
    <head> 
     <style> 
     #map { 
     height: 400px; 
     width: 100%; 
      } 
    </style> 
    </head> 
    <body> 
    <h3></h3> 
<div id="map" align="left"></div> 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDj38Snh4MEIsomOlTZfARryo7V8A_qk9o&libraries=places&callback=initMap"> 
    </script> 
    <?php json_encode($json, JSON_PRETTY_PRINT) ?> 
    <script type="text/javascript"> 
    function initMap() { 
    debugger; 

var locationsJSON = <?php echo json_encode($json, JSON_PRETTY_PRINT) ?>; 

var locations = locationsJSON; 
for (i = 0; i < locations.length; i++) { 

    if(location[i].city_id==1) 
    { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: new google.maps.LatLng(31.5546, 74.3572), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    } 
    else if(location[i].city_id==2) 
    { 

    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: new google.maps.LatLng(25.2048,55.2708), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    } 
    } 
    var geocoder = new google.maps.Geocoder(); 
var infowindow = new google.maps.InfoWindow(); 


var marker, i; 
for (i = 0; i < locations.length; i++) { 

    console.log(locations[i]); 


    var myLatLng = new google.maps.LatLng(locations[i].lat, locations[i].lon); 

    marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map 
    }); 
    google.maps.event.addListener(marker, 'click', function(evt) { 
    var mark = this; 
    geocoder.geocode({ 
    location: evt.latLng 
    }, function(results, status) { 
    if (status == "OK") { 
     infowindow.setContent(results[0].formatted_address + "<br>" + results[0].geometry.location.toUrlValue(6)); 
     infowindow.open(map, mark); 
    } 
    }); 
    }); 
    }; 
    } 

google.maps.event.addDomListener(window, "load", initMap); 
</script> 
</body> 
</html>

來源

2017-05-30 H. tech

請提供證明問題的[mcve] – geocodezip

@geocodezip我已編輯該問題。現在可以幫助我解決問題 –

我沒有看到位置的任何示例數據。我無法運行你的PHP代碼（我認爲我不需要重現這個問題），請提供一個演示問題的[mcve]（最好是一個正常的SO代碼片段） – geocodezip

您可以使用fitBounds（）google.maps.Map類的方法

https://developers.google.com/maps/documentation/javascript/reference#Map

你可以在你的代碼修改initMap（）函數引入邊界並調用fitBounds（）。檢查我的意見，開始//Added:

function initMap() { 
    debugger; 

    var locationsJSON = <?php echo json_encode($json, JSON_PRETTY_PRINT) ?>; 

    var locations = locationsJSON; 
    for (i = 0; i < locations.length; i++) { 

     if(location[i].city_id==1) 
     { 
      var map = new google.maps.Map(document.getElementById('map'), 
       { 
        zoom: 4, 
        center: new google.maps.LatLng(31.5546, 74.3572), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }); 
     } 
     else if(location[i].city_id==2) 
     { 

      var map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 4, 
       center: new google.maps.LatLng(25.2048,55.2708), 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 

     } 
    } 
    var geocoder = new google.maps.Geocoder(); 
    var infowindow = new google.maps.InfoWindow(); 

    //Added: create bounds 
    var bounds = new google.maps.LatLngBounds(); 

    var marker, i; 
    for (i = 0; i < locations.length; i++) { 

     console.log(locations[i]); 


     var myLatLng = new google.maps.LatLng(locations[i].lat, locations[i].lon); 

     marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map 
     }); 

     //Added: extend bounds with new coordinate 
     bounds.extend(myLatLng); 

     google.maps.event.addListener(marker, 'click', function(evt) { 
      var mark = this; 
      geocoder.geocode({ 
       location: evt.latLng 
      }, function(results, status) { 
       if (status == "OK") { 
        infowindow.setContent(results[0].formatted_address + "<br>" + results[0].geometry.location.toUrlValue(6)); 
        infowindow.open(map, mark); 
       } 
       }); 
      }); 
     }; 

     //Added: fit the bounds 
     map.fitBounds(bounds); 
    }

希望這會有所幫助！

來源

2017-06-01 11:57:15 xomena

如何根據city_id居中地圖？

回答

相關問題