如何使用“onclick”功能在 Google 地图上显示用户位置？答案

【问题标题】：how to show user location on Google maps using "onclick" function?如何使用“onclick”功能在 Google 地图上显示用户位置？
【发布时间】：2015-02-11 18:52:07
【问题描述】：

我正在尝试构建一个显示地图的网站，并在其上显示一个按钮，可将您带到当前位置。我正在使用谷歌地图服务来提取地图，我还设法自己获取用户位置，所以所有的 JavaScript 似乎都工作正常，但是当将函数 getlocation 添加到代码中并尝试从 HTML 中调用它时不起作用。我相信这可能没有找到功能，我不知道为什么？我将在下面留下代码：

<script>
 var map;

function initialize() {

var miami = new google.maps.LatLng(41.85, -87.65);

  var mapOptions = {
    zoom: 4,
    center: miami,
    disableDefaultUI: true,
  }
  map = new google.maps.Map(document.getElementById('mymap'),
                                mapOptions);

  var myloc = document.getElementById("try");

  function getlocation () {
    //code

    // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });

    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
  }


function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);


}
}


google.maps.event.addDomListener(window, 'load', initialize);

    </script>

我对所有内容都使用内联样式。我对 JavaScript 有点陌生，所以如果可以请告诉我我的错误在哪里，或者我还需要什么才能从 HTML 中创建一个按钮调用 JavaScript 上的函数。另外这里是HTML按钮和地图div

    <style>
  html, body, #mymap{
    height: 100%;
    margin: 0px;
    padding: 0px
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
  <body>
    <div id="try"><button onclick="getlocation()">Click here</button></div>
    <div id="mymap"></div>
  </body>

如果你不明白我的问题是什么，也请评论！这是我的第一个问题！

【问题讨论】：

你可以查看一些IP Geo API的。有些人会给你那个IP的longitude/latitude，然后你可以将longitude/latitude插入一个变量或将它作为参数放入函数调用中。请记住 **Geo data is only rough** 并且某些 IP 不会返回特定位置/州/城市/城镇，因此建议对数据进行正确验证。
我看到了许多在谷歌地图上使用 js 获取用户位置的方法，但我不知道如何使用地图外甚至地图内的按钮调用该函数。我只是想找到一种方法来创建一个将我带到用户当前位置的按钮。

标签： javascript html google-maps onclick geolocation

【解决方案1】：

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

    marker = new google.maps.Marker({position: event.latLng, map: map});

});

【讨论】：

所以你是说我应该在我的js中添加它？虽然我不想要一个标记，但我只想让我的 HTML 上的按钮将我带到用户当前位置
如果您可以编辑您的答案并解释您显示的代码的作用，以及该代码为何/如何回答问题，它真的很有帮助。代码块本身通常不是有用的答案。
点击它会带你到用户的位置，你也会得到纬度
对上述代码稍作改动：改为调用google.maps.event.addDomListener(...)。然后你只需要用getLocation() 替换行marker = new google...。假设您的 getLocation() 工作正常，这将在用户单击地图上的任意位置时触发您的功能。
还有一件事，把getlocation()从initialize函数中去掉。