将谷歌地图设置为当前位置

-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

将谷歌地图设置为当前位置

回答

相关问题