Mostra La mia posizione su Google Maps API v3

Question

"My Location" in Google Maps javascript API

Questa domanda è stato chiesto più di sei mesi fa. L'API di Google Maps API v3 è stata aggiornata per utilizzare il pulsante "La mia posizione" trovato su http://maps.google.com?

La mia posizione è il controllo tra l'uomo di Street View ei controlli di aspetto del gamepad.

Se l'API di Google Maps non fornisce La mia posizione, allora devo scrivere la mia funzione di geolocalizzazione HTML5 utilizzando navigator.gelocation quindi creare il mio controllo su Google Maps?

Answer 1

No, ma aggiungendo il proprio marcatore in base alla posizione corrente è facile:

var myloc = new google.maps.Marker({ 
    clickable: false, 
    icon: new google.maps.MarkerImage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png', 
                new google.maps.Size(22,22), 
                new google.maps.Point(0,18), 
                new google.maps.Point(11,11)), 
    shadow: null, 
    zIndex: 999, 
    map: // your google.maps.Map object 
}); 

if (navigator.geolocation) navigator.geolocation.getCurrentPosition(function(pos) { 
    var me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); 
    myloc.setPosition(me); 
}, function(error) { 
    // ... 
}); 

Answer 2

//copy and paste this in your script section. 
if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(success, error); 
} else { 
    alert('location not supported'); 
} 

//callbacks 
function error(msg) { 
    alert('error in geolocation'); 
} 

function success(position) { 
    var lats = position.coords.latitude; 
    var lngs = position.coords.longitude; 
    alert(lats); 
    alert(lngs) 
}; 

Answer 3

Abbiamo fatto un tale componente per Google Maps API v3. Chiunque può utilizzare in progetti personalizzati per aggiungere un controllo che mostra geolocalizzazione corrente con una sola riga di codice:

var geoloccontrol = new klokantech.GeolocationControl(map, mapMaxZoom); 

dopo compreso nell'intestazione HTML questo JavaScript:

<script src="https://cdn.klokantech.com/maptilerlayer/v1/index.js"></script> 

See:

http://www.maptiler.com/maptilerlayer/

per un esempio di codice e documentazione.

aggiunge il controllo standard per la cartina - e una volta sfruttato - mostra il cerchio blu intorno alla vostra posizione con dimensioni derivata dalla precisione dei dati di localizzazione disponibili. Se non trascini la mappa, ti manterrà posizionata una volta che ti sposti.

Questo controllo è stato sviluppato per il visualizzatore generato automaticamente dal software http://www.maptiler.com/, che crea riquadri per sovrapposizioni di mappe e livelli personalizzati creati da immagini e geodati raster.

Answer 4

devi farlo da solo. Ecco una parte di codice per aggiungere il pulsante "La tua posizione". HTML

<div id="map">Map will be here</div> 

CSS

#map {width:100%;height: 400px;} 

JS

var map; 
var faisalabad = {lat:31.4181, lng:73.0776}; 

function addYourLocationButton(map, marker) 
{ 
    var controlDiv = document.createElement('div'); 

    var firstChild = document.createElement('button'); 
    firstChild.style.backgroundColor = '#fff'; 
    firstChild.style.border = 'none'; 
    firstChild.style.outline = 'none'; 
    firstChild.style.width = '28px'; 
    firstChild.style.height = '28px'; 
    firstChild.style.borderRadius = '2px'; 
    firstChild.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)'; 
    firstChild.style.cursor = 'pointer'; 
    firstChild.style.marginRight = '10px'; 
    firstChild.style.padding = '0px'; 
    firstChild.title = 'Your Location'; 
    controlDiv.appendChild(firstChild); 

    var secondChild = document.createElement('div'); 
    secondChild.style.margin = '5px'; 
    secondChild.style.width = '18px'; 
    secondChild.style.height = '18px'; 
    secondChild.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-1x.png)'; 
    secondChild.style.backgroundSize = '180px 18px'; 
    secondChild.style.backgroundPosition = '0px 0px'; 
    secondChild.style.backgroundRepeat = 'no-repeat'; 
    secondChild.id = 'you_location_img'; 
    firstChild.appendChild(secondChild); 

    google.maps.event.addListener(map, 'dragend', function() { 
     $('#you_location_img').css('background-position', '0px 0px'); 
    }); 

    firstChild.addEventListener('click', function() { 
     var imgX = '0'; 
     var animationInterval = setInterval(function(){ 
      if(imgX == '-18') imgX = '0'; 
      else imgX = '-18'; 
      $('#you_location_img').css('background-position', imgX+'px 0px'); 
     }, 500); 
     if(navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
       var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
       marker.setPosition(latlng); 
       map.setCenter(latlng); 
       clearInterval(animationInterval); 
       $('#you_location_img').css('background-position', '-144px 0px'); 
      }); 
     } 
     else{ 
      clearInterval(animationInterval); 
      $('#you_location_img').css('background-position', '0px 0px'); 
     } 
    }); 

    controlDiv.index = 1; 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv); 
} 

function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: faisalabad 
    }); 
    var myMarker = new google.maps.Marker({ 
     map: map, 
     animation: google.maps.Animation.DROP, 
     position: faisalabad 
    }); 
    addYourLocationButton(map, myMarker); 
} 

$(document).ready(function(e) { 
    initMap(); 
});