如何使用 HTML5 地理位置 javascript 使用地理位置（用户的当前位置）初始化 Google Maps API答案

【问题标题】：How to initialize Google Maps API with geolocation ( current position of user ) with HTML5 geolocation javascript如何使用 HTML5 地理位置 javascript 使用地理位置（用户的当前位置）初始化 Google Maps API
【发布时间】：2013-10-27 07:15:18
【问题描述】：

如何将返回值从showPostion function 传递到initialize。此脚本的目标是向 GoogleMap 显示用户的当前位置。

请看下面脚本中的 cmets：

 <head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
  </style>
  <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?<%= API_KEYS['google']['api_key'] %>&sensor=true">
  </script>

  <script type="text/javascript">

      function getLocation(){
          {
              if (navigator.geolocation)
              {
                  navigator.geolocation.getCurrentPosition(showPosition);
              }
              else{x.innerHTML="Geolocation is not supported by this browser.";}
          }

      }

      function showPosition(position) {
          var latitude  = position.coords.latitude;
          var longitude = position.coords.longitude;
          alert('latitude:' + latitude + 'longitude:' + longitude )

       //   This function is supposed to return the current latitude and longitude of user
       //   example: 48.1673341, 17.0830998
      }


      function initialize() {

          var mapOptions = {


         //    How to pass the result from function showPosition to LatLng ?
         //    see the line below:                
         center: new google.maps.LatLng(48.1673341,17.0830998),
              zoom: 13,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById("map-canvas"),
                  mapOptions);

      }

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

  $(document).ready(function(){     //  events before the windows loads
    getLocation();
  });


  </script>
</head>


<h3>Hello from Google maps </h3>


<div id="map-canvas"/>

【问题讨论】：

标签： javascript ruby-on-rails html google-maps-api-3 geolocation

【解决方案1】：

解决方案是使用google.maps.LatLng class并在该对象上调用lat()和lng()方法，如下所示：

lat()   number  Returns the latitude in degrees.
lng()   number  Returns the longitude in degrees.

  function getLocation(){

      {
          if (navigator.geolocation)

          {

              var options = {
                  enableHighAccuracy: true,
                  timeout: 5000,
                  maximumAge: 0
              };

              navigator.geolocation.getCurrentPosition( success, error,options);
          }

          else

          { x.innerHTML= "Geolocation is not supported by this browser."; }
      }

  }

  function error(e) {

  console.log("error code:" + e.code + 'message: ' + e.message );

  }

  function success(position) {
     var  lat  = position.coords.latitude;
     var  lng =  position.coords.longitude;

     var  myLocation =   new google.maps.LatLng(lat, lng);


     var mapOptions = {
           center: new google.maps.LatLng(myLocation.lat(),myLocation.lng()),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      var map = new google.maps.Map(document.getElementById("map-canvas"),
              mapOptions);


      var marker = new google.maps.Marker({
          position: myLocation,
          map: map,
          title:"you are here"
      });

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

【讨论】：

【解决方案2】：

我不知道最好的方法，但你可以解析 2 个位置

function showPosition(position) {
          var latitude  = position.coords.latitude;
          var longitude = position.coords.longitude;

          return latitude.concat(';',longitude);
      }

比你拆分你的位置得到经度和纬度

var position = showPosition(position);
position = position.split(';');

// position[0] -> latitude
// position[1] -> longitude

【讨论】：