Перейти к пользовательскому указателю местоположения

Question

У меня есть этот код, который устанавливает несколько маркеров, и я новичок в API Карт Google, и пытаюсь узнать, как настроить карту для автоматического отображения маркера местоположения текущего пользователя. Учебник, который я получаю, задает центр карты после получения всех маркеров. Вот мой код: -

<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

Это невозможно читать текущий пользователь широту долготы без его разрешения, так как вы должны использовать Географическое положение или позволить пользователю вручную ввести его/ее местоположение вручную.

<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> 

или вторая возможность: -

<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> 

Но это зависит от браузера.

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 

в браузерах, если: - В разделе «Конфиденциальность» местоположения раздела прочь, то мы не можем отслеживать местонахождение с помощью этой Геокодировать так Пользователь должен держать привет месте на в браузере.

Вы просто написать это в коде сконцентрируется на карте

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' 
     }; 

На Chrome 5.0, геолокации API будет работать только на безопасных условиях, таких как HTTPS. Если ваш сайт размещен в незащищенном источнике (например, HTTP), запросы на получение местоположения пользователей больше не будут работать.