Wie zentriert man die Karte nach city_id?

-1

Zoomen und zentrieren Sie die Karte anhand ihrer Markierungen.Wie zentriert man die Karte nach city_id?

Wie kann ich die Karte nach ihren Markierungen zoomen und zentrieren.Als zum Beispiel sind alle angezeigten Markierungen von Dubai, also möchte ich die Karte zu Dubai zentrieren, wenn alle Markierungen von USA sind, möchte ich zoomen und zentrieren es in die USA. das ist mein Code jemand mir bitte helfen.

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>

Quelle

2017-05-30 H. tech

Bitte geben Sie eine [mcve], die das Problem zeigt – geocodezip

@geocodezip ich habe die Frage bearbeitet.Jetzt helfen Sie mir, das Problem zu lösen –

Ich sehe keine Beispieldaten für Standorte. Ich kann Ihren PHP-Code nicht ausführen (und ich glaube nicht, dass ich das Problem reproduzieren muss). Bitte geben Sie eine [mcve] an, die das Problem demonstriert (vorzugsweise ein funktionierendes SO-Code-Snippet). – geocodezip

können Sie verwenden fitBounds() -Methode von google.maps.Map Klasse

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

Sie die initMap ändern können() Funktion in Ihrem Code Einführung der Grenzen und Aufruf von fitBounds(). Überprüfen Sie meine Kommentare, die mit //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); 
    }

Hoffnung beginnen, das hilft!

Quelle

2017-06-01 11:57:15 xomena

Wie zentriert man die Karte nach city_id?

Antwort

Verwandte Themen