移動用戶位置標記

Question

我有這樣的代碼，設置多個標誌，我是新來的谷歌地圖API，並試圖瞭解如何設置地圖上自動顯示當前用戶的位置標記。我收到的教程是在接收到所有標記後設置地圖中心。這裏是我的代碼： -

<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）上，則獲取用戶位置的請求將不再起作用。