Zum Benutzer Standortmarker wechseln

Question

Ich habe diesen Code, der mehrere Markierungen setzt, und ich bin neu in Google Maps API und versuche zu lernen, wie die Karte so eingestellt wird, dass die Standortzeichenmarkierung des aktuellen Benutzers automatisch angezeigt wird. Das Tutorial, das ich bekomme, ist das Kartenzentrum beim Empfang aller Marker gesetzt. Hier ist mein Code: -

<script> 
var startPos, positionPromise = $.Deferred(); 

navigator.geolocation.getCurrentPosition(function(position) { 
    startPos = position; 
    $('#pok_lat').val(startPos.coords.latitude); 
    $('#pok_long').val(startPos.coords.longitude); 

    positionPromise.resolve(); 

}, function(error) { 
    alert('Error occurred. Error code: ' + error.code + ''); 
    // error.code can be: 
    // 0: unknown error 
    // 1: permission denied 
    // 2: position unavailable (error response from locaton provider) 
    // 3: timed out 

    positionPromise.reject(); 

}); 

$(function($) { 
    // Asynchronously Load the map API 
    var script = document.createElement('script'); 
    script.src = "//maps.googleapis.com/maps/api/js?key=SOMEAPIKEY&callback=initialize"; 
    document.body.appendChild(script); 
}); 

window["initialize"] = function() { 
    var map; 
    var bounds = new google.maps.LatLngBounds(); 
    var mapOptions = { 
     mapTypeId: 'roadmap' 
    }; 

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

    // Multiple Markers LatLong 
    $.when(positionPromise).then(function(){ 
      var lats = document.getElementById("pokemon_lat").value; 
      var longi = document.getElementById("pokemon_long").value; 
      console.log('Lat:'+lats+' Long:'+longi); 

    var markers = [ 
     ['You are here!', lats,longi], 
     <?php 
     for ($x = 0; $x < count($pok_info); $x++) { 
      if ($x < count($pok_info)) { 
       $addcomma = ","; 
      } 
      else { 
       $addcomma = ""; 
      } 
      $pok_array[] = "['".$pok_info[$x]['name']."', ".$pok_info[$x]['lat'].",".$pok_info[$x]['long']."]".$addcomma; 

     } 

      $remove_comma = count($pok_array); 
      $remove_comma = $remove_comma - 1; 
      $pok_array[$remove_comma] = rtrim($pok_array[$remove_comma],','); 
       foreach ($pok_array as $value) { 
       echo $value; 
      } 
     ?> 
    ]; 

    // Info Window Content 
    var infoWindowContent = [ 
     ['You are here!'], 
     <?php 
     for ($x = 0; $x < count($pok_info); $x++) { 
      if ($x < count($pok_info)) { 
       $addcomma = ","; 
      } 
      else { 
       $addcomma = ""; 
      } 
      $pok_array_info[] = "['<div class=\"info_content\"><h3>".$pok_info[$x]['name']."</h3><br><img width=\"100\" height=\"100\" src=\"".$pok_info[$x]['pic']."\"><p>".$pok_info[$x]['description']."</p>']".$addcomma; 

     } 

      $remove_comma = count($pok_array_info); 
      $remove_comma = $remove_comma - 1; 
      $pokemon_array_info[$remove_comma] = rtrim($pok_array_info[$remove_comma],','); 
       foreach ($pok_array_info as $value) { 
       echo $value; 
      } 
     ?> 
    ]; 

    // Pok Icons 

    var pokeImage = [ 
     ['images/pokeball.png'], 
     <?php 

      $img_icons = array(); 

      for ($x = 0; $x < count($pok_info); $x++) { 
       $img_icon = $pok_info[$x]['pic']; 
       $img_icon = explode(".",$img_icon); 
       $img_icons[] = $img_icon[0]."_small.png"; 
       $addcomma = ","; 

      $pok_array_info_pic[] = "['".$img_icons[$x]."']".$addcomma; 

     } 


      $remove_comma = count($pok_array_info_pic); 
      $remove_comma = $remove_comma - 1; 
      $pok_array_info[$remove_comma] = rtrim($pok_array_info_pic[$remove_comma],','); 
       foreach ($pok_array_info_pic as $value) { 
       echo $value; 
      } 

      ?> 
    ]; 

    // 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][1], markers[i][2]); 
     bounds.extend(position); 
     marker = new google.maps.Marker({ 
      position: position, 
      map: map, 
      title: markers[i][0], 
      icon: pokeImage[i][0] 
     }); 

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

     map.panTo(marker.getPosition()); 

     // Automatically center the map fitting all markers on the screen 
     //map.fitBounds(bounds); 
     //console.log('Lat:'+lats)+' Long:'+parseInt(longi)); 
    } 

    // 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); 
    }); 

    }, function(){ 
      console.log("Could not get latitude and longitude)-:"); 
     }); 

} 
</script> 

Answer 1

Dies ist nicht möglich, Benutzer aktuelle Breite Länge ohne seine Erlaubnis zu lesen, damit Sie entweder sollten Geo Location verwenden oder lassen Sie Benutzer manuell ihren/seinen Standort manuell eingeben.

<html> 
<div id="map_canvas"></div> 
</html> 
    <script> 
    $(document).ready(function() { 
    if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(showPosition); 
     } 


    drawMap(document.getElementById("map_canvas"),position.coords.latitude,position.coords.longitude) 
    }); 
    function drawMap(element, latitude, longitude) 
    { 
     latitude = latitude || 23.83; 
     longitude = longitude || 84.31; 
     var latlng = new google.maps.LatLng(latitude, longitude); 
     var mapOptions = {zoom: 7, center:latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false}; 
     map = new google.maps.Map(element, mapOptions); 
    } 
    </script> 

oder zweite Möglichkeit: -

<html> 
<input type="text" id="latitude"> 
<input type="text" id="longitude"> 
    <div id="map_canvas"></div> 
    </html> 
     <script> 
     $(document).ready(function() { 
    var latitude = document.getElementById("latitude"); 
    var latitude = document.getElementById("longitude"); 
    drawMap(document.getElementById("map_canvas"),latitude,longitude) 
     }); 
     function drawMap(element, latitude, longitude) 
     { 
      latitude = latitude || 23.83; 
      longitude = longitude || 84.31; 
      var latlng = new google.maps.LatLng(latitude, longitude); 
      var mapOptions = {zoom: 7, center:latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false}; 
      map = new google.maps.Map(element, mapOptions); 
     } 
     </script> 

Aber es ist Browser abhängig.

Currently the W3C Geolocation API is supported by the following desktop browsers: 

Firefox 3.5+ 
Chrome 5.0+ 
Safari 5.0+ 
Opera 10.60+ 
Internet Explorer 9.0+ 
There is also support for the W3C Geolocation API on mobile devices: 

Android 2.0+ 
iPhone 3.0+ 
Opera Mobile 10.1+ 
Symbian (S60 3rd & 5th generation) 
Blackberry OS 6 
Maemo 

in Browsern If: - Im Bereich „Datenschutz“ Abschnitt Standort aus, dann können wir den Standort nicht verfolgen in Browser Diese Geocode so Benutzer verwenden sollte auf hallo Lage halten.

Sie dies nur in Ihrem Code schreiben Sie es auf der Karte

var latitude = document.getElementById('pok_lat'); 
    var longitude = document.getElementById('pok_long'); 
    var latlng = new google.maps.LatLng(latitude, longitude); 
    window["initialize"] = function() { 
     var map; 
     var bounds = new google.maps.LatLngBounds(); 
     var mapOptions = { 
      center:latlng, 
      mapTypeId: 'roadmap' 
     }; 

Ab Chrome 5.0 wird die Geolocation API arbeiten nur auf sicheren Kontexten wie HTTPS Zentrieren wird. Wenn Ihre Website auf einem nicht sicheren Ursprung gehostet wird (z. B. HTTP), funktionieren die Anforderungen zum Abrufen des Benutzerstandorts nicht mehr.