webentwicklung-frage-antwort-db.com.de

Google maps API - Karte auf den aktuellen Standort des Kunden zentrieren

Ich habe mir die verschiedenen Zeiten angesehen, in denen diese Frage gestellt wurde, aber ich kann nicht genau sagen, wo ich falsch liege. Hier ist mein Code:

<html>
<head>
    <title> Map </title>
    <style>
        html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 500px;
        width: 800px;}
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var map;
        function initialize()
        {
            var myLatlng1 = new google.maps.LatLng(53.65914, 0.072050);

            var mapOptions = 
            {
                zoom: 10,
                center: myLatlng1,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);


            <?php
                $sql = mysql_query("SELECT * FROM data ORDER BY ID DESC");
                while($row =mysql_fetch_array($sql))
                {
                    $desc = $row['DESCRIPTION'];
                    $location = $row['LOCATION'];
                    $counter += 1; 
                ?>

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(<?php echo $location; ?>),
                map: map,
                title: '<?php echo $desc; ?>',
                icon: '/image/cam.png'
            });

           navigator.geolocation.getCurrentPosition(showPosition);  
        }

        var showPosition = function (position) 
           {
               map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 16);

           }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>

Ursprünglich wird der Mittelpunkt auf myLatlng1 festgelegt, und der Code am unteren Rand, der auf den aktuellen Standort des Benutzers gesetzt wird, hat nichts, keine Ideen.

Danke im Voraus.

javascriptgoogle-mapsgeolocation
34
James

Verwenden Sie den folgenden Code, um den aktuellen Standort des Benutzers abzurufen (GEOLOCATION):

 if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(function (position) {
         initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
         map.setCenter(initialLocation);
     });
 }

Um ein Beispiel zu zeigen, habe ich Ihren PHP-Code entfernt. Überprüfen Sie dies JSFiddle

Ich hoffe du verstehst.

91
Praveen

So stellen Sie eine nützliche Karte bereit, unabhängig davon, ob der Benutzer die "Standorterkennung zulassen" des Browsers zugelassen oder abgelehnt hat. Eingabeaufforderung (ändern Sie den Standardspeicherort entsprechend):

<script>
  function initMap() {

  gMap = new google.maps.Map(document.getElementById('map'));

  navigator.geolocation.getCurrentPosition(function(position) {
    // Center on user's current location if geolocation Prompt allowed
    var initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    gMap.setCenter(initialLocation);
    gMap.setZoom(13);
  }, function(positionError) {
    // User denied geolocation Prompt - default to Chicago
    gMap.setCenter(new google.maps.LatLng(39.8097343, -98.5556199));
    gMap.setZoom(5);
  });
}
</script>
0
shacker