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

【问题标题】：Set google map to current location将谷歌地图设置为当前位置
【发布时间】：2017-05-29 20:35:43
【问题描述】：

我的 html 页面中有一个谷歌地图，地图上面有两个输入字段，当你点击地图时，它会在这些字段中返回纬度和纬度，我想要的是在这张地图中设置我的当前位置，无论谁打开这张地图，它都会确定他当前的位置并将其显示在地图中，我已经尝试过地理位置，但它不适用于我的代码，这是我的代码：

  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>

【问题讨论】：

您对地理定位进行了哪些尝试？ “它不适用于您的代码”是什么意思？请提供一个 minimal reproducible example 来证明该问题。

标签： javascript google-maps geolocation location

【解决方案1】：

您可以使用navigator.geolocation.getCurrentPosition() 完成此操作

这是fiddle

【讨论】：

【解决方案2】：

我差点把它删了。我知道这不是您正在寻找的，但它可能会帮助您操作当前的代码
这是一个带有一个输入字段的工作示例，其中 long/lat 可以用逗号分隔。

<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

【讨论】：