如何在嵌入谷歌地图上显示用户的位置?

时间:2016-01-12 15:23:39

标签: google-maps

我正在按照这里的教程https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

和这段代码:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 500px;
        height: 400px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map');
        var mapOptions = {
          center: new google.maps.LatLng(44.5403, -78.5463),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

就像一个魅力。但它始终显示坐标:44.5403, -78.5463。有没有办法改变它,以便当用户从纽约进入我的页面时,他会看到纽约的地图,而悉尼的人会看到悉尼等等?

谢谢!

1 个答案:

答案 0 :(得分:1)

为此,您必须使用地理位置。

Here is an example:

navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };