Setzen Sie google map auf den aktuellen Standort

-1

Ich habe eine Google Map in meiner HTML-Seite, die Karte hat zwei Eingabefelder darüber, wenn Sie auf die Karte klicken, gibt die lat und lang in diesen Feldern, was ich will, ist zu setzen meine aktuelle Position in dieser Karte, wer auch immer diese Karte öffnet es seine aktuelle Position bestimmt und zeigen es in der Karte, ich die Geolocation versucht, aber es mit meinem Code nicht funktioniert, hier ist mein Code:Setzen Sie google map auf den aktuellen Standort

google.maps.event.addListener(map, 'click', function(event) { 
 

 
    alert(event.latLng); 
 

 
});

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

<div class="form-group"> 
 
    <label for="exampleInputEmail1">Latitude</label> 
 
    <input placeholder="Latitude" id="lat"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="exampleInputEmail1">Longitude</label> 
 
    <input placeholder="Longitude" id="lang"> 
 
    </div> 
 

 
<div id="map"></div> 
 
<script> 
 
    function myMap() { 
 
    var mapOptions = { 
 
     center: new google.maps.LatLng(51.5, -0.12), 
 
     zoom: 10, 
 
     mapTypeId: google.maps.MapTypeId.HYBRID 
 
    } 
 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 
    
 
    google.maps.event.addListener(map, 'click', function(event) { 
 

 
    
 
    var myLatLng = event.latLng; 
 
    var lat = myLatLng.lat(); 
 
    var lng = myLatLng.lng(); 
 
     
 
     document.getElementById("lat").value = lat; 
 
     document.getElementById("lang").value = lng; 
 
    
 
}); 
 
    
 
    
 
    } 
 
    
 
    
 
</script> 
 
<script> 
 

 
</script> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script> 
 

 
<script> 
 
    
 
</script>

Quelle

2017-05-29 stephjhonny

Was Sie für die Lokalisierung versucht haben? Was meinst du mit "es hat nicht mit deinem Code funktioniert"? Bitte geben Sie eine [mcve] an, die das Problem veranschaulicht. – geocodezip

Sie können es mit navigator.geolocation.getCurrentPosition()

Hier ist die fiddle

Quelle

2017-05-29 21:05:15 Laura

Ich habe dies fast gelöscht. Ich weiß, dass es nicht genau das ist, wonach Sie suchen, aber es könnte Ihnen helfen, Ihren aktuellen Code zu manipulieren.
Hier ist ein Arbeitsbeispiel mit einem Eingabefeld, wo das long/lat durch ein Komma getrennt werden kann.

<html> 
<head> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script language="javascript" type="text/javascript"> 

    var map; 
    var geocoder; 
    function InitializeMap() { 

     var latlng = new google.maps.LatLng(39.949430, -75.171984); 
     var myOptions = 
     { 
      zoom: 8, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      disableDefaultUI: true 
     }; 
     map = new google.maps.Map(document.getElementById("map"), myOptions); 
    } 

    function FindLocaiton() { 
     geocoder = new google.maps.Geocoder(); 
     InitializeMap(); 

     var address = document.getElementById("addressinput").value; 
     geocoder.geocode({ 'address': address }, function (results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       map.setCenter(results[0].geometry.location); 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: results[0].geometry.location 
       }); 

      } 
      else { 
       alert("Geocode was not successful for the following reason: " + status); 
      } 
     }); 

    } 


    function Button1_onclick() { 
     FindLocaiton(); 
    } 

    window.onload = InitializeMap; 

</script> 
</head> 
<body> 
<h2>Gecoding Demo JavaScript: </h2> 
<table> 
<tr> 
<td> 
    <input id="addressinput" type="text" style="width: 447px" /> 
</td> 
<td> 
    <input id="Button1" type="button" value="Find" onclick="return Button1_onclick()" /></td> 
</tr> 
<tr> 
<td colspan ="2"> 
<div id ="map" style="height: 253px" > 
</div> 
</td> 
</tr> 
</table> 
</body> 
</html>

Codepen Beispiel
https://codepen.io/rw1982/pen/qmzZPP

Quelle

2017-05-29 21:06:33 rw1982

Setzen Sie google map auf den aktuellen Standort

Antwort

Verwandte Themen