將谷歌地圖設置爲當前位置

-1

我在我的html頁面中有一個Google地圖，地圖上方有兩個輸入字段，當您點擊地圖時，它會返回這些字段中的lat和lang，我想要的是設置我現在的位置在這張地圖上，誰打開這個地圖就決定了他的當前位置，並顯示在地圖上，我曾嘗試地理位置，但它並沒有我的代碼工作，這裏是我的代碼：將谷歌地圖設置爲當前位置

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>

來源

2017-05-29 stephjhonny

那你試試的地理位置？你的意思是「它不適用於你的代碼」？請提供證明問題的[mcve]。 – geocodezip

您可以用做navigator.geolocation.getCurrentPosition()

這裏的fiddle

來源

2017-05-29 21:05:15 Laura

我幾乎刪除了這個。我知道這不是你正在尋找的東西，但它可能會幫助你操縱當前的代碼
這是一個有一個輸入字段的實例，其中長/緯可以用逗號分隔。

<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例
https://codepen.io/rw1982/pen/qmzZPP

來源

2017-05-29 21:06:33 rw1982

將谷歌地圖設置爲當前位置

回答

相關問題