如何使用HTML5地理位置javascript初始化具有地理位置(用户的当前位置)的Google Maps API

Question

如何使用HTML5地理位置javascript初始化具有地理位置(用户的当前位置)的Google Maps API

5 javascript html5 ruby-on-rails geolocation google-maps-api-3

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

请参阅以下脚本中的注释:

 <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"/>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 3

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

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

Run Code Online (Sandbox Code Playgroud)

  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() );

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，7 月前
查看次数：	3428 次
最近记录：	12 年，7 月前